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

Question

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

这是我尝试过的代码：

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

Answer 1

你需要重写内部风格的的TableSortLabel组成部分。具体来说，如果您查看 的CSS APITableSortLabel，您会看到TableSortLabel具有icon样式。

所以，首先定义这些样式：

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组件的内部样式否决了。通常，当您想要更改组件的内部样式时，您需要像我们在这里所做的那样使用覆盖。

如果您不熟悉定义样式并将它们应用到带有classesprop 的组件的概念，您可以在此处了解相关信息。请务必查看该页面上和整个其余文档中的代码示例。