如何使用 ReactTable 更改 header 的样式

Question

我需要把默认样式改成下面的样式

Answer 1

尝试添加以下内容 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 2

更新 css 引用

在您的 class 中，将 import "react-table/react-table.css"; 替换为 import "../myPath/react-table-override.css"; 以使用您自己修改后的 css 文件，该文件位于 [myPath].

更新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 删除默认值 box-shadowing 并将 unicode 箭头添加到 header 名称的末尾。

.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 3

在将 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: " BC";
    float: right;
}

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

Answer 4

另一种解决方案是 return header 部分中的自定义组件。`

 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'
          },

如何使用 ReactTable 更改 header 的样式

How do I change the style of the header using ReactTable

reactjs

react-table