如何更改Material UI表格中排序图标的样式？

我想让材质表中的排序图标即使在隐藏时也稍微可见。目前，当未选择/不可见时，图标的不透明度为 0。但我想将其更改为 0.4，以便它们稍微可见，并且选择后，不透明度将为 1，以便它们完全可见。 由于图标是 tableHead 的一部分，并且我无权访问图标的父级，所以我不知道如何覆盖样式。

这是我尝试过的代码：

https://codesandbox.io/s/kk7yqr8285?module=%2Fdemo.js https://codesandbox.io/s/kk7yqr8285?module=%2Fdemo.js

你需要覆盖内部样式 https://material-ui-next.com/customization/overrides/ of the TableSortLabel成分。具体来说，如果您查看CSS API 的TableSortLabel https://material-ui-next.com/api/table-sort-label/#css-api，你会看到TableSortLabel has an icon style.

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

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

然后，覆盖icon你的风格TableSortLabel使用您的逻辑来确定排序图标是否处于活动状态：

<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成分。一般来说，当您想要更改组件的内部样式时，您需要像我们在这里那样使用覆盖。

如果您不熟悉定义样式并将其应用到组件的概念classes道具，你可以了解一下here https://material-ui-next.com/customization/css-in-js/。请务必查看该页面以及文档其余部分的代码示例。