I’m trying to update the style of Columns display option in Material UI but I couldn’t find way to do it
I want to change the input border color and change the color of checkbox
I tried to do it like this
sx={{
'& .MuiDataGrid-paper': {
color: theme.palette.secondary.dark,
'& .MuiDataGrid-panelWrapper': {
background: theme.palette.secondary.dark,
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: `${theme.palette.secondary.dark} !important`,
},
'& .MuiInputLabel-root.Mui-focused': {
color: `${theme.palette.secondary.dark} !important`,
},
},
}}
You can do it using sx props or overriding default styles with emotions. I would say the best approach is doing it with sx props. But i think in your code you have missed some targeted valid classes. i’ll have the corrected one below according to my knowledge.
sx={{
'& .MuiDataGrid-paper': {
color: theme.palette.secondary.dark,
'& .MuiDataGrid-panelWrapper': {
background: theme.palette.secondary.dark,
},
},
'& .MuiOutlinedInput-root': {
'& .MuiOutlinedInput-notchedOutline': {
borderColor: `${theme.palette.secondary.dark} !important`, // Input border color
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: `${theme.palette.secondary.light} !important`, // Hover effect
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: `${theme.palette.secondary.main} !important`, // Focused state
},
},
'& .MuiCheckbox-root': {
color: theme.palette.secondary.main, // Checkbox color
'&.Mui-checked': {
color: theme.palette.secondary.dark, // Checked state
},
},
}}
1
If the dialog uses portal, it is not rendered inside the datagrid. It is not children of a datagrid, you can’t access it like this & .MuiDataGrid-paper
Depending of the version of the mui you are using, there are props in datagrid that allow you to pass props to its inner components.
In version 7:
slotProps={{
columnMenu: {
sx: {
...styles here
}
}
}}
In version 5:
componentsProps={{
columnMenu: {
sx: {
...style here
}
}
}}
Your style has to be adapted to the real DOM. You won’t need & .MuiDataGrid-paper selector.
2