css - Material UI表格中排序图标的样式怎么改？

Question

我想让 Material 表中的排序图标即使在隐藏时也能稍微可见。目前，图标的不透明度在未选中/不可见时为 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 .请务必查看该页面和整个文档中的代码示例。