如何在react material-table中始终显示排序图标并为当前排序列显示蓝色

Question

我已经用material-table库创建了一个material表。我希望所有列都能显示排序图标。对于当前排序的列，颜色也应该是蓝色的。

下面是代码的沙箱链接。

https://codesandbox.io/s/stupefied-mclean-okcvx?file=/src/App.js

我怎样才能达到上述预期的输出?

是否有办法通过重写组件来实现这一点?

Answer 1

要始终显示排序图标(不仅仅是悬停时)，您需要为您的material-table应用CSS样式。

styles

css

.App {
font-family: sans-serif;
}
.MuiTableSortLabel-icon {
opacity: 1;
}