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

Question

我正在尝试做的事情:

我试图通过传入包含 headCellColor、headCellBackgroundColor 等属性的样式对象，为用户提供为我的 EnhancedTable 组件提供自定义样式的选项、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