Question

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

这是我尝试过的代码：

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

Answer 1

您需要TableSortLabel组件的override the internal styles。具体来说，如果您查看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,
  },
});

然后，使用您的逻辑覆盖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。请务必查看该页面和其他文档中的代码示例。

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

1 个答案: