react-table headers 的不同颜色

Question

react-table 库创建的样式 table 有问题。

请找到下面的设计。

Table 是按照文档中显示的方式创建的。是否可以按照设计所示为 header 着色？

提前致谢

P.S。这是文档中的代码片段

要创建 headers，我需要创建一个数组。所以我不能改变特定的样式 header （实际上我可以提供要渲染的元素，但它会在元素内部渲染）

Answer 1

您可以使用任何 React 组件或 JSX 来显示列 headers、单元格和页脚中的内容。

const columns = [
  {
    Header: () => (
      <span>
        <i className="fa-tasks" /> Progress
      </span>
    )
  }
]

请查看此 link 了解更多详情

https://github.com/tannerlinsley/react-table/tree/v6#custom-cell-header-and-footer-rendering

Answer 2

不得不使用解决方法。正如 Taha Jamil 提到的，您可以在 Header 中渲染任何 JSX。通过调整一些样式你会得到这样的东西：

{
  Header: () => {
    return(
      <div
        style={{
          backgroundColor: "red",
          position: "absolute",
          width: "100%",
          height: "100%",
          top: "0px",
          left: "0px",
          padding: "12px 20px",
        }}
      >
        Title
      </div>
    );
  }
}

不是最好的解决方案，但有效

Answer 3

检查 this，数据中添加了 class 个名称，数据的样式应该不同。我想这就是你需要的。

react-table headers 的不同颜色

Different colour for react-table headers

reactjs

react-table