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

【问题标题】：How to custom color text and icon in TableSortText component of Material-ui?如何在 Material-ui 的 TableSortText 组件中自定义彩色文本和图标？
【发布时间】：2019-11-03 01:21:12
【问题描述】：

我想做的事：

我正在尝试通过传入包含headCellColor、headCellBackgroundColor、bodyCellColor、bodyCellBackgroundColor 等属性的样式对象，为用户提供为我的EnhancedTable 组件提供自定义样式的选项，这些属性可以用于为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 在文本处于活动状态时会影响它。使用图标，一切都按预期进行。唯一的问题是文本。

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

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案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

【讨论】：

【解决方案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”）

【讨论】：

哇，这太疯狂了，但它确实有效。试图覆盖 MUI 类的超特异性是我的想法，但你的解决方案奏效了，我学到了一些东西

【解决方案3】：

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

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

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

【讨论】：

【解决方案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'

【讨论】：