代码之家 › 专栏 › 技术社区 › tesicg

如何为不同的反应表创建不同的样式?

react-table reactjs

1

tesicg · 技术社区 · 6 年前

我们有一个web应用程序,在其中使用React Table( https://react-table.js.org )。我们以以下方式覆盖了原始React表的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;
            }
    ...

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

如何做到这一点?

1 回复 | 直到 6 年前

1

0

StackedQ the red crafteryt 6 年前

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

    ...