Как настроить цвет текста и значка в компоненте TableSortText в Material-ui?

Question

Что я пытаюсь сделать:

Я пытаюсь предоставить пользователю возможность предоставить пользовательский стиль моему компоненту EnhancedTable, передав объект стилей, содержащий такие свойства, как headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor и т. Д., Которые могут использоваться для окраски ячеек в TableHead и TableBody.

В компоненте TableHead я использую TableSortLabel способом, подобным тому, что они сделали в этом примере материала-пользовательского интерфейса: https://material -ui.com / components / tables / # сортировочно-усилитель-выбирающий

Я хочу настраивать цвет текста и значков со стрелками при наведении курсора и, когда он активен, на основании информации, предоставленной пользователем.

Давайте посмотрим цвета TableSortLabel в разных ситуациях: Цвет текста изначально серый, стрелка отсутствует. Когда мышь наведена на нее, появляется серая стрелка, и текст становится черным. При нажатии на него устанавливается активное состояние, серая стрелка становится черной, а текст постоянно становится черным, пока активное состояние не будет удалено.

То, что я пробовал до сих пор:

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>
  );
}

Вот как это выглядит в браузере: https://i.postimg.cc/fW7W2MRB/c1.jpg

Первый - обычный заголовок, второй - при наведении, а третий - при нажатии (активное состояние).

Из того, что мы можем наблюдать, цвет текста совершенно не зависит от свойства color css во всех трех случаях (нормальный, при наведении, активный). При наведении курсора backgroundColor влияет только на значок, а не на текст. Однако мы видим, что backgroundColor влияет на текст, когда он активен. Все идет как положено с иконкой. Единственная проблема с текстом.

Что я мог сделать неправильно? Как я могу решить мою проблему?