[data grid] The cell selection color is not being applied

[mahammahmood]

The problem in depth

When I select a cell with conditional formatting applied to the date, the cell selection color is not being applied to it.

In the screenshot, when I select the cells, the cells without color have the cell selection color applied, while the colored cells do not.

Here is a live demo of my problem.
Demo

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data, Grid, Premium, cell, selection
Order ID: 91010

[michelengelen]

Hey @mahammahmood ... this is because the renderCell function you use defines a custom background color for your cell:

renderCell: (params: any) => (
  <>
    <Box
      px="10px"
      sx={{
        backgroundColor:
          params.row.RAD_Complete_F < params.row.RAD_Complete_A
            ? "#FFE7E5"
            : "#CAFFE4",
        height: "100%",
        width: "100%",
      }}
    >
      <Stack
        justifyContent="center"
        sx={{
          height: "100%",
          width: "100%",
          color:
            params.row.RAD_Complete_F < params.row.RAD_Complete_A
              ? "#FF2D1E"
              : "#139B57",
        }}
      >
        {formatCustomCompleteDate(params.value, storedDateFormat)}
      </Stack>
    </Box>
  </>
),

In your screenshot you can see that the background of your cell is actually using the selection background color, but the red content is overlaying it, so it is not shown

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.