react で antd のデフォルト スタイルを変更する方法: 最初に div 親要素をテーブルに追加し、className を設定し、次にこのスタイル内でテーブル ヘッダー スタイルを設定します。
このチュートリアルの動作環境: Windows7 システム、React17 バージョン この方法は、すべてのブランドのコンピューターに適しています。
react で antd のデフォルト スタイルを変更する方法:
現在、react antd プロジェクトに取り組んでいます。必然的に、antd のデフォルト スタイルを変更するという問題が発生しました。
たとえば、テーブルコンポーネントのヘッダー背景色の設定をそのまま使用すると、プロジェクト全体のテーブルが変更されてしまいます。ここで使用する方法は、div 親要素をテーブルに追加し、それに className を設定してから、このスタイル内にテーブル ヘッダー スタイルを設定することです。
プリコンパイルされた .less を使用します。
<div className={styles.boxW} >
<Table
columns={colType}
rowKey='fxwd'
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);
}
}
}この方法では、現在のファイル内のテーブルのスタイルのみを変更できます。
ちなみに、.less のスタイル継承を (&:extend (継承クラス名)) で行う様子を示します。
.boxW {
min-width: 1150px;
}
.normalB {
&:extend(.boxW);
&:extend(.boxBorder);
}関連する無料学習の推奨事項: javascript (ビデオ)
以上がReactのantdデフォルトスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
