Question

我们有一个网络应用，我们使用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

您可以添加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);
    }

    ...

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

1 个答案: