[data grid] How to change DataGrid Palette colors

[sydneyjodon-wk]

The problem in depth

Hello 👋

Is there a way to change the DataGrid theme palette colors similar to how you can change component theme palette colors in other MUI components (i.e. for Alert you can change theme.palette.Alert.infoFilledBg)?

I specifically would like to change some of these variables in gridStyle - like containerBackground and pinnedBackground because our theme uses a different color for theme.palette.background.default, but we don't want the DataGrid header row or pinned rows/columns to be updated to that color:

Is there a way to override these colors? Either through setting a palette variable specifically for DataGrid or some other way? We tried using style overrides to override the color, but we're having trouble finding each element to style override since the variable is used in so many places.

FYI this is in MUI-X v7 (next)

Here is a codesandbox demo of the same issue - https://codesandbox.io/p/sandbox/datagrid-palette-colors-example-575y79?file=%2Fsrc%2FDemo.tsx%3A52%2C9

Thank you!

Search keywords: palette, pinnedBackground, containerBackground
Order ID: 82849

[romgrk]

For the time being you can use --DataGrid-pinnedBackground: #123456 !important on .MuiDataGrid-root (either via CSS or via the sx prop). This may cause issues with the hover/selected styles if the colors don't match closely though.

Waiting for feedback from the rest of the team, but we'll probably be adding shortly a more formal method to override the style variables.

[sydneyjodon-wk]

Perfect! Thank you, @romgrk !

[michelengelen]

Hey @sydneyjodon-wk ... there are actually 2 more ways to accomplish this:

1. you can use styled and create a styled DataGrid ...
2. ... or, more in line with your current approach, you can use themeAugmentation and add styleOverrides to your theme for the MuiDataGrid component.

@romgrk the pinned rows do not get a class applied that shows that they are pinned so we cannot target that. Is that intentional?

I have updated your example here

Would that be suficient for you?

[sydneyjodon-wk]

Thank you, @michelengelen - yes, it looks like updating using style overrides to override those variables will work for us - I didn't know you could do that! Thank you!

Like @romgrk mentioned, the hover state still gets the background.default color - which for us isn't a huge issue since our colors aren't as far off as that example I linked, but would there be a way to have the hover and selected colors pull from that variable too or something?

[romgrk]

Not for now, you'd need to add the hover/selected styles yourself. We'll update here as soon as we have a better styling solution.

[romgrk]

I have opened #12614, the customization API would look something like this. If you have any comments feel free to share.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@sydneyjodon-wk: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.