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;
}  

但它所做的只是改变整个表格标题的颜色，而不仅仅是图标。我试着在inside inspector里胡闹，但我也不能以那种方式访问图标。

任何帮助都将不胜感激。提前谢谢你。

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: inset 0 3px 0 0 rgba(0,0,0,0.6)