[data grid] Change background color of the Header Filters

[gatorsong]

The problem in depth

I'm using the header filters and trying to adjust the background color to white/transparent. The current style has both the column header and header filters both blue. I want to be able to distinguish from the top and bottom column headers.

Your environment

`npx @mui/envinfo`

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

Search keywords: header filters background

Order ID: 106374

[gatorsong]

What I'm working with...

'& .datagrid-custom-header': {
  backgroundColor: theme.palette.primary.main,
  color: 'white',
},
'& .MuiDataGrid-sortIcon': {
  color: 'white',
},
'& .MuiDataGrid-menuIconButton': {
  color: 'white',
},
'& .MuiDataGrid-filterIcon': {
  color: 'white',
},
'& .MuiDataGrid-columnHeaderTitleContainer': {
  color: 'white',
  '.MuiSvgIcon-root': {
    color: 'white',
  },
},
'& .MuiDataGrid-columnHeader': {
  // Forced to use important since overriding inline styles
  height: 'unset !important',
  backgroundColor: theme.palette.primary.main,
  color: 'white',
  border: '1px solid white',
},
'& .MuiDataGrid-columnHeaderTitle': {
  whiteSpace: 'normal',
  lineHeight: 'normal',
},
'& .MuiDataGrid-columnHeaders': {
  // Forced to use important since overriding inline styles
  maxHeight: '168px !important',
},

[michelengelen]

Hey @gatorsong ... there are a few things you can improve in your example:

1. we have a prop for columnHeaderHeight and headerFilterHeight:

    columnHeaderHeight={30}
    headerFilterHeight={60}

2. You should ideally use the gridClasses object to target the components. this is better to prevent bugs in future upgrades (when classNames change). As an example:

   - '& .MuiDataGrid-columnHeader': {
   + [`& .${gridClasses.columnHeader}`]: {

3. You can target each header filter cell with this:

    [`& .${gridClasses.headerFilterRow} > .${gridClasses.columnHeader}`]: {
      background: theme.palette.secondary.main,
    },

Does that fix your use case?

[gatorsong]

Thanks

[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.

Note

@gatorsong 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.