[DataGridPro] & .MuiDataGrid-columnHeaders is not working with @mui/x-data-grid-pro": ^7.1.1

[SantyTaco]

Steps to reproduce

Link to live example: (required) This is the link to the live example: https://codesandbox.io/p/sandbox/amazing-leaf-5jp3sj

Steps:

1. Starting a react project
2. Downloading Mui Data grid pro
3. Trying to modify the column header background color sx={{ "& .MuiDataGrid-columnHeaders": { background: "black", color: "white", }, }}

Current behavior

After add the sx style sx={{ "& .MuiDataGrid-columnHeaders": { background: "black", color: "white", }, }} The grid columns header are not taking the color assigned

Expected behavior

I expect the column header background color change to black.

Context

Currently, in production env I am using "@mui/x-data-grid-pro": "^6.19.1" library and the style is working well, and the header column background color is black, but I have updated the library to @mui/x-data-grid-pro": ^7.1.1 and the background color is white even I have tried to change it in multiple ways.

Pic in prod:

Pic in dev:

Is possible to change the column header background color in the new version of data grid pro?

Your environment

npx @mui/envinfo

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

This is my env info and I use Google Chrome System: OS: macOS 14.4 Binaries: Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.126 Edge: Not Found Safari: 17.4 npmPackages: typescript: 5.3.3

Search keywords: & .MuiDataGrid-columnHeaders is not working

Search keywords:

[maramizo]

Not a solution, but a workaround can be using .MuiDataGrid-columnHeader instead.

[KenanYusuf]

Hi @SantyTaco,

You can set the column header background color via your theme:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  mixins: {
    MuiDataGrid: {
      // Headers, and top & bottom fixed rows
      containerBackground: '#343434',
    },
  },
});

See the documentation for more details https://mui.com/x/react-data-grid/style/#theme-header-and-pinned-sections

Hopefully this solves your issue, please let me know if you have any further questions on it.

[github-actions[bot]]

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

[arminmeh]

Since the bot has re-opened this issue without me seeing any new comments, I will close it again. Feel free to re-open if the solution provided by @KenanYusuf is not enough

[github-actions[bot]]

:warning: 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.

@SantyTaco: 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.