如何在物料界面的TableSortText组件中定制彩色文本和图标？
我想做的是：
我试图通过传入一个包含属性(如EnhancedTable、headCellBackgroundColor、bodyCellColor、bodyCellBackgroundColor等)的样式对象，为用户提供为headCellColor组件提供自定义样式的选项，这些属性可用于为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会影响它。随着图标的出现，一切都如期而至。唯一的问题是文本。
我能做错什么？我该如何解决我的问题？
Stack Overflow用户
发布于 2019-10-26 14:31:38
解决问题的方法如下：
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“专案在单个组件中单独使用它(参见示例中的"BootstrapButton“)。
https://stackoverflow.com/questions/56682287
复制相似问题
腾讯云开发者
