Css 如何更改物料界面表格中排序图标的样式？

我想使物料表中的排序图标即使在隐藏时也略微可见。当前，当未选中/不可见时，图标的不透明度为0。但是我想把它改为0.4，这样它们会稍微可见，选中时，不透明度将为1，这样它们就会完全可见。 由于图标是桌面的一部分，我无法访问图标的父级，因此我不知道如何覆盖样式

以下是我尝试过的代码：

您需要查看

表端口标签的名称。具体地说，如果查看，您将看到
表端口标签
有一个
图标
样式

因此，首先定义这些样式：

const styles = theme => ({
  // Fully visible for active icons
  activeSortIcon: {
    opacity: 1,
  },
  // Half visible for inactive icons
  inactiveSortIcon: {
    opacity: 0.4,
  },
});

然后，使用确定排序图标是否处于活动状态的逻辑覆盖
表中的
图标
样式：

<TableSortLabel
  classes={{
    // Override with the active class if this is the selected column or inactive otherwise
    icon: ((orderBy === column.id) ? classes.activeSortIcon : classes.inactiveSortIcon ) }}
>



您最初的解决方案具有正确的样式和逻辑，但是您的内联样式被
TableSortLabel
组件的内部样式所否决。通常，当您想要更改组件的内部样式时，需要像我们在这里所做的那样使用覆盖

如果您不熟悉定义样式并将其应用于具有
类的组件的概念，您可以了解这一点。请务必查看该页面和其余文档中的代码示例。
谢谢，非常适合。