如何在 Material-ui 的 TableSortText 组件中自定义颜色文本和图标？

Question

我正在尝试做的事情：

我试图向用户提供选项，以提供定制的造型到我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: classes.tableSortLabel
        }}
        direction={onHoverSortState}
        onClick={clickHandler}
      >
        {props.children}
      </TableSortLabel>
    </FancyTableCell>
  );
}

这是在浏览器中的样子：https : //i.postimg.cc/fW7W2MRB/c1.jpg

第一个是普通标题，第二个是悬停，第三个是点击时（活动状态）。

从我们可以观察到，color在所有三种情况下（正常、悬停、活动），文本颜色完全不受css 属性的影响。悬停时，backgroundColor只影响图标而不影响文本。但是，我们可以看到，backgroundColor当文本处于活动状态时，它会影响文本。图标的一切都按预期进行。唯一的问题是文本。

我可能做错了什么？我该如何解决我的问题？

Answer 1

对我有用的是：

const StyledTableSortLabel = withStyles((theme: Theme) =>
createStyles({
    root: {
      color: 'white',
      "&:hover": {
        color: 'white',
      },
      '&$active': {
        color: 'white',
      },
    },
    active: {},
    icon: {
      color: 'inherit !important'
    },
  })
)(TableSortLabel);

您可以参考以下内容以增加 css 特异性：https : //material-ui.com/customization/components/#pseudo-classes