如何为react-table表格的不同表头设置自定义颜色

完全可以实现，以下两种方案均适配你通过数组配置表头的开发模式，不需要调整现有配置逻辑，也不依赖表头内部的自定义渲染元素，可直接作用在<th>标签层面匹配设计稿需求。

方案1：通过配置自定义样式字段实现（适合简单单一样式场景） #

• 第一步：在columns数组的每列配置中新增自定义样式属性，可直接指定颜色值：

const columns = [
  {
    Header: '第一列表头',
    accessor: 'col1',
    // 新增自定义表头背景色属性
    headerBgColor: '#1890ff'
  },
  {
    Header: '第二列表头',
    accessor: 'col2',
    headerBgColor: '#52c41a'
  },
  // 剩余列按设计稿需求配置对应颜色即可
]

• 第二步：在表头渲染逻辑中读取该属性，给<th>标签绑定行内样式：

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => (
        <th 
          {...column.getHeaderProps()}
          style={{
            // 保留原有默认样式
            ...column.getHeaderProps().style,
            // 加载自定义配置的颜色
            backgroundColor: column.headerBgColor,
            color: '#ffffff' // 可同步配置文字颜色等其他样式
          }}
        >
          {column.render('Header')}
        </th>
      ))}
    </tr>
  ))}
</thead>

方案2：通过配置自定义类名实现（适合复杂多状态样式场景，如需hover、选中态等） #

• 第一步：在columns数组的每列配置中新增自定义类名字段：

const columns = [
  {
    Header: '第一列表头',
    accessor: 'col1',
    headerClassName: 'table-header-col1'
  },
  {
    Header: '第二列表头',
    accessor: 'col2',
    headerClassName: 'table-header-col2'
  }
]

• 第二步：在表头渲染逻辑中给<th>绑定自定义类名：

<th 
  {...column.getHeaderProps()}
  className={`${column.getHeaderProps().className || ''} ${column.headerClassName || ''}`}
>
  {column.render('Header')}
</th>

• 第三步：在CSS文件中编写对应类的样式即可：

.table-header-col1 {
  background-color: #1890ff;
  color: #fff;
}
.table-header-col2 {
  background-color: #52c41a;
  color: #fff;
}
/* 可扩展hover、选中态等复杂样式 */
.table-header-col1:hover {
  background-color: #40a9ff;
}

以上两种方案对react-table v7、v8版本均兼容，不需要修改你现有的数组配置表头的开发逻辑，可直接落地。

内容的提问来源于stack exchange，提问作者Serge Najimov