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

Question

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

Answer 1

更新CSS参考

在您的课程中，将import "react-table/react-table.css";替换为import "../myPath/react-table-override.css";，以使用位于[myPath]的修改过的CSS文件。

更新CSS

替换原始CSS

.ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc {
  box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
}

.ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc {
  box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6);
}

使用以下CSS删除默认的框阴影并将unicode箭头添加到标题名称的末尾。

.ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc {
  div:first-child:after {
    content: " ▴";
  }
}

.ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc {
  div:first-child:after {
    content: " ▾";
  }
}

Answer 2

在将react-table.css复制到一个新文件中之后，我做了以下工作，如下所示进行了修改，并将新文件导入到使用react-table的任何地方。

前两个部分摆脱了难看的黑色边框，后两个部分添加了相关的箭头。

.ReactTable .rt-thead .rt-th.-sort-asc,
.ReactTable .rt-thead .rt-td.-sort-asc {
    box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.6)
}

.ReactTable .rt-thead .rt-th.-sort-desc,
.ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.6)
}

div.-sort-desc::after {
    content: " \25BC";
    float: right;
}

div.-sort-asc::after {
    content: " \25B2";
    float: right;
}

Answer 3

尝试添加以下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;
}

Answer 4

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

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

Answer 5

import 'react-table/react-table.css';
 use headerStyle property inside column prop.

  headerStyle: {
          background:'blue',
          textAlign:'center',
          color: 'darkorange',
          borderRadius: '5px',
          padding: '5px',
          border:'1px solid black',
          borderRight: '3px solid yellow',
          borderLeft:'3px solid yellow',
          borderTop:'3px solid yellow',
          borderBottom:'3px solid yellow'
          },