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

Question

我正在尝试做的事情：

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

在TableHead组件，我用TableSortLabel以类似于他们在这个物质的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

Answer 2

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

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 3

我找不到合适的方法来做到这一点，所以我想出了一个覆盖材料 ui css 的临时解决方案。

我将此添加到我的全局 css 中：

.MuiTableSortLabel-root.MuiTableSortLabel-active,
.MuiTableSortLabel-root:hover,
.MuiTableSortLabel-icon {
  color: inherit !important;
}

Answer 4

用 Mui5 为我工作：

sx={{
  '&.MuiTableSortLabel-root': {
    color: 'white',
  },
  '&.MuiTableSortLabel-root:hover': {
    color: 'blue',
  },
  '&.Mui-active': {
    color: 'blue',
  },
  '& .MuiTableSortLabel-icon': {
    color: 'blue !important',
  },
}}

'&.MuiTableSortLabel-root' <-- 没有空格 &。

'&.Mui-active' <-- 没有空格 &.

'& .MuiTableSortLabel-icon' <-- 空格