[QUESTION] How can i style the headers?

[m-o-leary]

Hi,

I want to apply custom styles to my frozen header / column.

I am styling the background with:

.ReactVirtualized__Grid.topRightGrid, 
.ReactVirtualized__Grid.topLeftGrid,
.ReactVirtualized__Grid.bottomLeftGrid{
    background-color: ${Color.primary};
    color: ${Color.textColor2};
}

However the cellHeader style from MUI is taking precedence for the font color.

Any ideas?

Thanks

[jeffjenx]

I was able to apply some custom styling for the headers by adding some properties to my createMuiTheme({ overrides: { ... } }), e.g.:

createMuiTheme({
  ...,
  overrides: {
    MuiTable: {
      root: {
        '& .topRightGrid': {
          backgroundColor: 'inherit !important'
        },
      },
    },
  }
})

I notice this table component doesn't play well with the Dark theme, either, but I wasn't able to revise the styles related to cellHovered state.

Not sure if this will help you get the font color to stick for the headers, though.