Closed mahammahmood closed 14 hours ago
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
The issue has been inactive for 7 days and has been automatically closed.
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.
![Screenshot 2024-06-21 181145](https://github.com/mui/mui-x/assets/115474187/39ae9b76-f74d-467a-a041-4c7037d45a42)
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