反应表标题的不同颜色答案

【问题标题】：Different colour for react-table headers反应表标题的不同颜色
【发布时间】：2021-11-04 10:43:37
【问题描述】：

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

请在下面找到设计。

表格是按照文档中显示的方式创建的。是否可以按照设计所示对标题进行着色？

提前谢谢你

附：这是文档中的代码 sn-p

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

【问题讨论】：

请提供文档中的相关代码sn-p。
@EmilKarlsson 请检查屏幕截图。我也提供了一些信息，如果有帮助，请多多指教

标签： reactjs react-table

【解决方案1】：

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

【讨论】：

这很好，但是有打字稿错误“类型'HeaderGroup
@SergeNajimov，我发现您实际上不需要将 className 添加到 headergroup，而是将样式对象添加到 style 道具。在此处检查第 133 和 167 行：codesandbox.io/s/hungry-wave-9nsfy?file=/src/App.js
哦，谢谢。会尝试并让你知道

【解决方案2】：

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

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

【讨论】：

我不想创建具有绝对风格的新元素。但我相信这是唯一的解决方法。谢谢

【解决方案3】：

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

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

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

【讨论】：

请不要在图片中提供代码。