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

Question

我希望在material表格中，即使排序图标被隐藏，它们也能稍微可见。目前，当未选择/可见时，图标的不透明度为0。但我想将其更改为0.4，以便它们稍微可见，并且当选择时，不透明度将为1，因此它们将完全可见。 由于这些图标是tableHead的一部分，我无法访问图标的父元素，因此不知道如何覆盖样式。

这是我尝试过的代码：

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

- Etherealm

Answer 1

你需要覆盖TableSortLabel组件的内部样式。具体来说，如果你查看TableSortLabel的CSS API，你会发现TableSortLabel有一个icon样式。

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

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

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

<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 属性将它们应用于组件的概念，可以在 这里 学习。确保查看该页面以及文档中其他地方的代码示例。

- Jules Dupont