Изменить цвет заголовка ReactTable с помощью css -модулей

Question

Я не могу изменить цвет заголовка таблицы React с помощью css -модулей.

Мой код:

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

Как я могу это сделать, используя css -модули. Насколько мне известно, я могу использовать модуль css с именем элемента, только я не могу переопределить CSS других модулей, использующих его.

P.S добавил картинку

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!
    }
  ];

В вашем стиле. css, импортируйте этот стиль в свой компонент таблицы.

.my_custom_class{
  color: mediumblue;
}

Live Demo : Таблица React