小编Pot*_*der的帖子

我正在尝试做的事情：

我试图向用户提供选项，以提供定制的造型到我EnhancedTable通过传递样式组件对象包含如属性headCellColor，headCellBackgroundColor，bodyCellColor，bodyCellBackgroundColor等等，可用于着色的细胞中TableHead和TableBody。

在TableHead组件中，我使用的TableSortLabel方式类似于他们在这个 material-ui 文档示例中所做的：https : //material-ui.com/components/tables/#sorting-amp-selecting

我希望根据用户提供的道具自定义悬停时和活动时的文本和箭头图标的颜色。

让我们看看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: …