Comment personnaliser le texte et l'icône de couleur dans le composant TableSortText de Material-ui?

Ce que j'essaie de faire:

J'essaie de fournir à l'utilisateur la possibilité de fournir un style personnalisé à mon composant EnhancedTable en transmettant un style objet contenant des propriétés telles que headCellColor , headCellBackgroundColor , bodyCellColor , bodyCellBackgroundColor etc. qui peuvent être utilisées pour colorer les cellules dans TableHead et TableBody.

Dans le composant TableHead , j'utilise un TableSortLabel dans un façon similaire à ce qu'ils ont fait dans cet exemple de documentation material-ui: https : //material-ui.com/components/tables/#sorting-amp-selecting

Je souhaite personnaliser la couleur du texte et des icônes fléchées au survol et lorsqu'il est actif en fonction des accessoires fourni par l'utilisateur.

Voyons les couleurs de TableSortLabel dans différentes situations: La couleur du texte est initialement grise et il n'y a pas de flèche. Lorsque la souris est survolée, une flèche grise apparaît et le texte devient noir. En cliquant dessus, l'état actif est défini, la flèche grise devient noire et le texte devient noir de manière permanente jusqu'à ce que l'état actif soit supprimé.

Ce que j'ai essayé jusqu'à présent: p>

const useStyles = makeStyles({
  tableSortLabel: props => ({
    backgroundColor: "blue",
    color: props.headCellColor,
    fill: props.headCellColor,
    "&:hover": {
      backgroundColor: "blue"
    }
  })
});

function EnhancedTableHeadCell(props) {
  const { isActive, onHoverSortState, clickHandler, ...otherProps } = props;
  const classes = useStyles(props.styles);

  return (
    <FancyTableCell styles={props.styles} {...otherProps}>
      <TableSortLabel
        active={isActive}
        classes={{
          icon: classes.tableSortLabel,
          active: classes.tableSortLabel
        }}
        direction={onHoverSortState}
        onClick={clickHandler}
      >
        {props.children}
      </TableSortLabel>
    </FancyTableCell>
  );
}

Voici à quoi cela ressemble dans le navigateur: https://i.postimg.cc/fW7W2MRB/c1.jpg p >

Le premier est un en-tête normal, le second est en survol et le troisième est en cas de clic (état actif).

D'après ce que nous pouvons observer, la couleur du texte n'est totalement pas affectée par le couleur propriété css dans les trois cas (normal, survolé, actif). En survol, backgroundColor n'affecte que l'icône et non le texte. Cependant, nous pouvons voir que backgroundColor affecte le texte lorsqu'il est actif. Tout se passe comme prévu avec l'icône. Le seul problème est avec le texte.

Que pourrais-je faire de mal? Comment puis-je résoudre mon problème?