reactjs - React-table 开关排序图标

Question

Here is a link for the icon that I'm referring to. Black line at the top of the table header.

您好，我在问题中嵌入了一个链接，但我试图弄清楚如何切换 React-table 库的排序图标的颜色。我尝试使用

.sort-asc {
    color: green;
}  

以及相反

.sort-desc {
    color: green;
}  

但它所做的只是改变整个表格标题的颜色，而不仅仅是图标。我尝试在内部检查器中闲逛，但也无法以这种方式访问​​图标。

任何帮助将不胜感激。先感谢您。

Answer 1

我对此的解决方法是:

.MyReactTableClass {
  .-sort-desc {
    box-shadow: none !important;
    &:before {
      content: "▼";
      float: right;
    }
  }

  .-sort-asc {
    box-shadow: none !important;
    &:before {
      content: "▲";
      float: right;
    }
  }
}