Reactのantdデフォルトスタイルを変更する方法

react で antd のデフォルト スタイルを変更する方法: 最初に div 親要素をテーブルに追加し、className を設定し、次にこのスタイル内でテーブル ヘッダー スタイルを設定します。

このチュートリアルの動作環境: Windows7 システム、React17 バージョン この方法は、すべてのブランドのコンピューターに適しています。

react で antd のデフォルト スタイルを変更する方法:

現在、react antd プロジェクトに取り組んでいます。必然的に、antd のデフォルト スタイルを変更するという問題が発生しました。

たとえば、テーブルコンポーネントのヘッダー背景色の設定をそのまま使用すると、プロジェクト全体のテーブルが変更されてしまいます。ここで使用する方法は、div 親要素をテーブルに追加し、それに className を設定してから、このスタイル内にテーブル ヘッダー スタイルを設定することです。

プリコンパイルされた .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);
        }
    }
}

この方法では、現在のファイル内のテーブルのスタイルのみを変更できます。

ちなみに、.less のスタイル継承を (&:extend (継承クラス名)) で行う様子を示します。

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

関連する無料学習の推奨事項: javascript (ビデオ)

以上がReactのantdデフォルトスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。