如何使用 ReactTable 更改标题的样式

Question

我需要将默认样式更改为下面的样式

Answer 1

另一种解决方案是在标题部分返回一个自定义组件。`

 const columns=[
      { 
        Header:()=><small className="my_custom_class">Name</small>,
        accessor:"name"
      }]`

Answer 2

尝试添加以下 css。您必须正确放置箭头。

rt-resizable-header -sort-desc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-top: 20px solid #000;
}

rt-resizable-header -sort-asc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-bottom: 20px solid #000;
}
.ReactTable .rt-thead .rt-th.-sort-desc, .ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: none;
}