reactjs - React-table 开关排序图标

Question

这是我所指的图标的链接。表头顶部的黑线。

您好，我在问题中嵌入了一个链接，但我试图弄清楚如何切换 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;
    }
  }
}

Answer 2

.sort-desc {
    box-shadow: inset 0 -3px 0 0 green;
} 

Answer 3

其实就是box-shadow，你可以很容易地改变它

box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6)