Как создать разные стили для разных таблиц React? - PullRequest
Новая
       11

Как создать разные стили для разных таблиц React?

0 голосов
/ 14 мая 2018

У нас есть веб-приложение, в котором мы используем React Table (https://react -table.js.org ).Мы переопределили исходный CSS-файл React Table следующим образом (у нас есть файл scss): 

@import '~react-table/react-table.css';

.ReactTable {
    border: none;

    .rt-noData {
        z-index: auto;
        top: calc(50% + 20px);
    }

    .rt-thead {
        &.-header {
            box-shadow: none;
            border-bottom: solid 1px #dddddd;
            border-top: solid 1px #dddddd;

            .row {
                display: flex;
            }
    ...

И, конечно, все наши таблицы имеют одинаковый стиль.Но мне нужно по-разному стилизовать некоторые таблицы, то есть некоторые настройки одинаковы, а некоторые нет.

Как это сделать?

1 Ответ

0 голосов
/ 14 мая 2018

Вы можете добавить div родителя с css для изменения стилей, например, обернуть ваш ReactTable в <div className="custom-table"></div> и затем: 

 .custom-table // -> for custom table
  .ReactTable {
    border: none;

    .rt-noData {
        z-index: auto;
        top: calc(50% + 20px);
    }

    ...


  .ReactTable { // -> for default table
    border: none;

    .rt-noData {
        z-index: auto;
        top: calc(50% + 20px);
    }

    ...
...