Heim > Web-Frontend > js-Tutorial > So ändern Sie den Antd-Standardstil von React

So ändern Sie den Antd-Standardstil von React

coldplay.xixi
Freigeben: 2020-12-22 16:09:21
Original
4684 Leute haben es durchsucht

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.

So ändern Sie den Antd-Standardstil von React

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>
Nach dem Login kopieren
.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);
        }
    }
}
Nach dem Login kopieren

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

这里顺便记录一下.less

.boxW {
    min-width: 1150px;
}
.normalB {
    &:extend(.boxW);
    &:extend(.boxBorder);
}
Nach dem Login kopieren
rrreeeAuf 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage