如何为不同的React Table创建不同的样式？

Question

我们有一个Web应用程序，我们在其中使用React Table（ https://react-table.js.org ）。 我们通过以下方式覆盖了原始React Table的CSS文件（我们拥有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;
            }
    ...

而且，当然，我们所有的桌子都具有相同的风格。 但是，我需要以不同的方式设置某些表的样式，即某些设置相同，而有些则不同。

怎么做？

Answer 1

您可以添加一个带有css的div父级来更改样式，例如，将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);
    }

    ...