如何为react-data-table-component组件的表头设置自定义样式？

问题原因 #

你在columns数组内配置的style属性默认仅作用于当前列的普通数据单元格，不会作用于表头单元格，所以出现你描述的问题。

实现表头自定义的两种常用方案 #

1. 单独修改某一列的表头样式 #

在列配置项中使用headCellStyle属性，该属性专门用来配置当前列对应的表头单元格样式，示例代码如下：

columns: [
  {
    name: "Name",
    selector: "name",
    sortable: true,
    // 数据单元格样式，也就是你之前写的配置的作用范围
    style: {
      background: "orange",
    },
    // 新增：当前列表头单元格样式
    headCellStyle: {
      background: "red",
      color: "#fff",
      fontWeight: "bold"
    }
  },
],

2. 全局统一修改所有表头的样式 #

如果你希望所有表头都应用同一套样式，可以直接在DataTable组件上通过customStyles属性全局配置，不需要单独给每个列加配置，示例代码如下：

import DataTable from 'react-data-table-component';

const customTableStyles = {
  headCells: {
    style: {
      background: 'orange',
      color: '#000',
      fontSize: '16px',
      fontWeight: 700,
    }
  },
  // 还可以扩展配置表头行、分页、表格边框等其他全局样式
  headRow: {
    style: {
      borderBottom: '2px solid #eee'
    }
  }
}

// 组件内使用时绑定customStyles
<DataTable
  columns={columns}
  data={data}
  customStyles={customTableStyles}
/>

官方API文档说明 #

你可以在npm官方包搜索平台或者GitHub代码托管平台搜索react-data-table-component，即可找到官方的完整API文档，里面包含所有配置项、用法示例、属性说明等完整学习内容。

内容的提问来源于stack exchange，提问作者Mahmoud Ali