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

Question

我要做的是：

我试图向用户提供一个选项，通过传入一个包含属性的样式对象，如HeadCellColor、HeadCellBackgroundColor、BodyCellColor、BodyCellBackgroundColor等，为TableHead和TableBody中的单元格着色，从而为我的EnhancedTable组件提供自定义样式。

在TableHead组件中，我使用了TableSortLabel，其方式与在此material-ui文档示例中所做的类似:https://material-ui.com/components/tables/#sorting-amp-selection

我希望自定义颜色的文本和箭头图标在悬停和当活动的基础上，由用户提供的道具。

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

第一个是正常标头，第二个是悬停状态，第三个是单击时（活动状态）。

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

我怎么可能做错呢？我怎样才能解决我的问题？

Answer 1

您的问题的解决方案如下：

MuiTableSortLabel: {
      root: {
        color: textPrimary,

        // if you want to have icons visible permanently
        // '& $icon': {
        //   opacity: 1,
        //   color: primaryMain
        // },

        "&:hover": {
          color: primaryMain,

          '&& $icon': {
            opacity: 1,
            color: primaryMain
          },
        },
        "&$active": {
          color: primaryMain,

          // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
          '&& $icon': {
            opacity: 1,
            color: primaryMain
          },
        },
      },
    }

我通过我的ThemeProvider全局使用这种重新样式，但您当然可以在单个组件中单独使用“WithStyles”HOC（参见示例中的“BootStrapButton”）

Answer 2

对我起作用的是：

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/#伪类