So ändern Sie den Antd-Standardstil von React

So ändern Sie den Antd-Standardstil in React: Fügen Sie zuerst ein div-Elternelement zur Tabelle hinzu und legen Sie einen Klassennamen fest. Legen Sie dann den Tabellenkopfstil innerhalb dieses Stils fest.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version. Diese Methode ist für alle Computermarken geeignet.

So ändern Sie den Standardstil von antd in React:

Ich arbeite derzeit an einem React+antd-Projekt. Wir sind zwangsläufig auf das Problem gestoßen, den Standardstil von antd zu ändern.

Wenn Sie beispielsweise den Elementstil direkt verwenden, um die Hintergrundfarbe der Kopfzeile der Tabellenkomponente festzulegen, wird die Tabelle des gesamten Projekts geändert. Die Methode, die ich hier verwende, besteht darin, der Tabelle ein übergeordnetes div-Element hinzuzufügen, einen Klassennamen dafür festzulegen und dann den Tabellenkopfstil innerhalb dieses Stils festzulegen.

Ich verwende die Vorkompilierung .less. .less预编译。

              <div className={styles.boxW} >
                    <Table 
                      columns={colType}
                      rowKey=&#39;fxwd&#39;
                      pagination={false}
                      bordered
                      dataSource={dataType}
                    />
              </div>

.boxW,.normalB {
    :global {
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
            padding: 8px 8px !important;
        }
        .ant-table-thead > tr > th {
            background-color: rgb(192, 244, 248);
        }
        .ant-table-thead > tr > th:hover {
            background-color: rgb(192, 244, 248);
        }
        .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
            background: rgb(192, 244, 248);
        }
    }
}

这样就可以只修改到当前文件里table的样式了。

这里顺便记录一下.less

.boxW {
    min-width: 1150px;
}
.normalB {
    &:extend(.boxW);
    &:extend(.boxBorder);
}

rrreee

Auf diese Weise können Sie den Tabellenstil nur in der aktuellen Datei ändern.

Übrigens ist hier die Stilvererbung von .less durch (&:extend (geerbter Klassenname)). rrreee

Verwandte kostenlose Lernempfehlungen:

Javascript🎜(Video)🎜🎜

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Antd-Standardstil von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!