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

Question

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

这是我尝试过的代码：

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

Answer 1

您需要override the internal styles 的TableSortLabel 组件。具体来说，如果您查看CSS API of TableSortLabel，您会发现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 属性定义样式并将其应用于组件的概念，您可以了解here。请务必查看该页面和其余文档中的代码示例。