reactjs - I'm using MUI-Data-Tables and I would like to change the header text color after I click to sort the Column?

Question

I need to override the default black text color when sorting a column, I'm not sure how to do it. The closest I got was to change the arrow icon color using the snippet below.

 MUIDataTableHeadCell: {
        sortAction: {
            '& path': {
              color: "teal " // or whatever you need
            }, 
            }, 
      }, 

Does anyone have an idea how can I change the text color too? :)

Answer 1

This should do the trick!

 MUIDataTableHeadCell: {
    sortAction: {
        '& path': {
          color: "teal " // or whatever you need
        }, 
     }, 
    sortActive: {
      color: ""  // whatever you need
    }
  }, 

sortActive = Header Text Color