使用css- ReactTable更改模块标题颜色

Question

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

我的代码是：

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

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

​

​

Answer 1

您可以在header部分中创建自定义组件。

  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