title: How to custom color text and icon in TableSortText component of Material-ui?
body: <p><strong>What I'm trying to do:</strong></p>
  
  <p>I am trying to provide the user the option to provide custom styling to my <code>EnhancedTable</code> component by passing in a styles object containing properties such as <code>headCellColor</code>, <code>headCellBackgroundColor</code>, <code>bodyCellColor</code>, <code>bodyCellBackgroundColor</code> etc which can be used to color the cells in <code>TableHead</code> and <code>TableBody</code>.</p>
  
  <p>In the <code>TableHead</code> component, I use a <code>TableSortLabel</code> in a way similar to what they've done in this material-ui docs example: <a href="https://material-ui.com/components/tables/#sorting-amp-selecting" rel="nofollow noreferrer">https://material-ui.com/components/tables/#sorting-amp-selecting</a></p>
  
  <p>I wish to custom color the text and the arrow icons on hover and when active based on the props provided by the user.</p>
  
  <p>Let's see the colors of <code>TableSortLabel</code> in different situations:
  The color of the text is grey initially and there is no arrow. When mouse is hovered over it, a grey arrow appears and the text turns black. On clicking it, active state is set, the grey arrow turns black and the text turns black permanently until active state is removed.</p>
  
  <p><strong>What I've tried so far:</strong></p>
  
  <pre><code>const useStyles = makeStyles({
    tableSortLabel: props =&gt; ({
      backgroundColor: "blue",
      color: props.headCellColor,
      fill: props.headCellColor,
      "&amp;:hover": {
        backgroundColor: "blue"
      }
    })
  });
  
  function EnhancedTableHeadCell(props) {
    const { isActive, onHoverSortState, clickHandler, ...otherProps } = props;
    const classes = useStyles(props.styles);
  
    return (
      &lt;FancyTableCell styles={props.styles} {...otherProps}&gt;
        &lt;TableSortLabel
          active={isActive}
          classes={{
            icon: classes.tableSortLabel,
            active: classes.tableSortLabel
          }}
          direction={onHoverSortState}
          onClick={clickHandler}
        &gt;
          {props.children}
        &lt;/TableSortLabel&gt;
      &lt;/FancyTableCell&gt;
    );
  }
  </code></pre>
  
  <p>This is what it looks like in the browser:
  <a href="https://i.postimg.cc/fW7W2MRB/c1.jpg" rel="nofollow noreferrer">https://i.postimg.cc/fW7W2MRB/c1.jpg</a></p>
  
  <p>The first one is a normal header, the second is on hover and the third is when clicked (active state).</p>
  
  <p>From what we can observe, the text color is totally unaffected by the <code>color</code> css property in all the three cases (normal, hover, active). On hover, <code>backgroundColor</code> only affects the icon and not the text. However, we can see that <code>backgroundColor</code> affects the text when it is active. Everything is going as expected with the icon. The only issue is with the text.</p>
  
  <p>What could I be possible doing wrong? How can I solve my problem?</p>