How do I change the :hover and :active color prop for the table column labels?

[KarenKelly818]

I've tried several methods, such as within the column object, within the options object, and as a component override. None of these methods work. I've

         columns={[  
           { title: 'Learning Plan Title', 
            field: 'lpTitle', 
            headerStyle: {
              backgroundColor: '#039be5', 
              color: '#fff',
              '&:hover': {
                color: '#bbdefb',
              },
            }},

options={{
          sorting: true,
          search: false,
          pageSize: 20,
          pageSizeOptions: [5, 10, 20, 50, 100],
          headerStyle: {
            backgroundColor: '#607d8b',
            color: '#FFF',
            paddingLeft: '8px',
            '&:hover': {
              color: '#bbdefb',
            },
          },
        }}

components={{
          Cell: props => (
            <MTableCell {...props} className={classes.cellStyle} />
          ),
          Header: props => (
            <MTableHeader {...props} style={{
              backgroundColor: '#607d8b',
              color: '#FFF',
              paddingLeft: '8px',
              '&:hover': {
                color: '#bbdefb',
              },}} />
          ),
        }}

[KarenKelly818]

I've also tried overriding via the MUI withStyles classes object, but no dice

[oze4]

You should be able to use makeStyles along with using an element/html/jsx for the title value.

[KarenKelly818]

I figured out a good solution for this issue. Use createMuiTheme and then wrap the MaterialTable in the MuiThemeProvider. This is an example of overriding the hover and active states for the table header labels:

const theme = createMuiTheme({
  overrides: {
    MuiTableSortLabel: {
      root: {
        color: '#fff',
        '&:hover': {
          color: '#bbdefb',
        },
      },
      active: {
        color: '#bbdefb',
      },
    },
  },
});

[s-kris]

@KarenKelly818 active color isn't applying. Can you confirm?

Thank you!

[asifkabani]

I am trying to target the same override for MuiTableSortLabel to add text-overlow: 'ellipsis' but it does not work, anyone have any ideas?

[nvinayvarma189]

Thanks, @KarenKelly818. It works. Yes @s-kris I can confirm that active color isn't applying for me.

[KarenKelly818]

It's been a while since I've worked on this bit, but I would try changing the active to '&:active': to see if that works properly

[nvinayvarma189]

Thanks, @KarenKelly818 That did not work for me. I tried putting the active attribute (both active and &:active) in different hierarchies under overrides but it did not work for me.

As a temporary workaround 😌, I just did this in my CSS file:

.MuiTableSortLabel-root.MuiTableSortLabel-active{
    color: white !important;
}

[s-kris]

@KarenKelly818 Already tried '&:active': and it isn't working.

@nvinayvarma189

.MuiTableSortLabel-root.MuiTableSortLabel-active{
    color: white !important;
}

This doesn't change the icon color.

Thank you!

[KarenKelly818]

@s-kris can you post an example of your code that isn't working?

[usahai]

const colHeader = columns.map(col => ({
    title: <Typography className={classes.colHeader}>{col.title}</Typography>,
    field: col.field
}));

<MaterialTable
    columns={colHeader}
    {...props}
/>

I did this, and the colors for the headerStyle worked, but I've lost all the columns with action icons on them. My guess is that this way of overriding + the headerStyles override is somehow clashing and causing the the column data to not be rendered. It must be matching text to each value during the case of override, and in the cases where it doesn't match the text, it crashes and renders a null value instead. This is a hypothesis though. Will have to investigate at a later time

[abhinav2000kiit]

@KarenKelly818 Already tried '&:active': and it isn't working.

@nvinayvarma189

.MuiTableSortLabel-root.MuiTableSortLabel-active{
    color: white !important;
}

This doesn't change the icon color.

Thank you!

.MuiTableSortLabel-root-192.MuiTableSortLabel-active-193.MuiTableSortLabel-root-192.MuiTableSortLabel-active-193 .MuiTableSortLabel-icon-194 { color: #7c858b !important; }