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

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

    ...