Javascript 如何在材质ui的TablesPortText组件中自定义颜色文本和图标？

我想做什么：

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>
  );
}

我试图向用户提供一个选项，通过传入一个包含属性的styles对象，例如

headCellColor

，

headCellBackgroundColor

，

bodyCellColor

，为我的

增强型表

组件提供自定义样式，

bodyCellBackgroundColor

等，可用于为

表头

和

表体

中的单元格着色

在

TableHead

组件中，我使用了一个

tablePortLabel

，其方式类似于他们在这个material ui文档示例中所做的：

我希望自定义颜色的文字和箭头图标的悬停和活动时，根据用户提供的道具

让我们看看不同情况下

表端口标签的颜色：
文本的颜色最初为灰色，没有箭头。将鼠标悬停在其上时，将显示一个灰色箭头，文本将变为黑色。单击它，将设置活动状态，灰色箭头将变为黑色，文本将永久变为黑色，直到删除活动状态

到目前为止我所尝试的：

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>
  );
}

const useStyles=makeStyles({
表端口标签：props=>({
背景颜色：“蓝色”，
颜色：道具。头饰颜色，
填充：道具。头部细胞颜色，
“&：悬停”：{
背景颜色：“蓝色”
}
})
});
功能增强型TableHeadcell（props）{
const{isActive，onHoverSortState，clickHandler，…otherProps}=props；
常量类=使用样式（道具样式）；
返回(
{props.children}
);
}

这是它在浏览器中的外观：

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

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

我可能做错了什么？如何解决我的问题？
我找不到合适的方法，所以我想出了一个临时解决方案来覆盖材质ui css

我在我的全局css中添加了以下内容：

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

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

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全局使用此重新设置样式，但您当然可以在单个组件中单独使用它（请参见示例中的“BootstrapButton”）
对我有效的是：

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

您可以参考以下内容以提高css的特异性：
哇，这太疯狂了，但它很管用。试图推翻MUI类的极端特殊性让我头疼，但你的解决方案奏效了，我学到了一些东西