使用 css-modules 更改 ReactTable 标题颜色

【问题标题】：Change ReactTable heading color using css-modules使用 css-modules 更改 ReactTable 标题颜色
【发布时间】：2020-11-02 20:03:45
【问题描述】：

我无法使用 css-modules 更改 React 表的标题颜色。

我的代码是：

.CustomerTable.ReactTable .rt-thead.-header {
    color: mediumblue;
}

如何使用 css-modules 做到这一点。据我所知，我可以使用带有元素名称的 css 模块，只是我不能覆盖使用它的其他模块的 CSS。

【问题讨论】：

标签： reactjs css-modules react-css-modules

【解决方案1】：

您可以在标题部分创建自定义组件。

  const columns = [
    {
      Header:()=><span className="my_custom_class">Name</span>,
      accessor: 'name' // String-based value accessors!
    },
    {
      Header: 'Age',
      accessor: 'age',
      Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
    }
  ];

在您的 style.css 中，将此样式导入您的表格组件。

.my_custom_class{
  color: mediumblue;
}

现场演示：React Table

【讨论】：

试过了，没用...我们不能用css类来做...添加图片供您参考...我想为标题行添加背景颜色