reactjs - Change ReactTable heading color using css-modules

Question

I am not able to change the color of the header for a React table using css-modules.

My code is :

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

How can I do this using css-modules. As far as I know I can use the css module with the elements name, only I cannot override CSS of other modules using it.

标签： reactjscss-modulesreact-css-modules

Answer 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;
}

现场演示：反应表