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

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

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

    ...

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

How to create different styles for different React Tables?

reactjs

react-table