Comment modifier le style par défaut de React

Comment modifier le style par défaut d'antd dans React : ajoutez d'abord un élément parent div au tableau et définissez un nom de classe, puis définissez le style d'en-tête du tableau dans ce style.

L'environnement d'exploitation de ce tutoriel : système windows7, version React17 Cette méthode convient à toutes les marques d'ordinateurs.

Comment modifier le style par défaut d'antd dans React :

Je travaille actuellement sur un projet React+antd. Inévitablement, nous avons rencontré le problème de la modification du style par défaut d'antd.

Par exemple, si vous utilisez le style d'élément directement pour définir la couleur d'arrière-plan de l'en-tête du composant tableau, le tableau de l'ensemble du projet sera modifié. La méthode que j'utilise ici consiste à ajouter un élément parent div au tableau, à lui définir un nom de classe, puis à définir le style d'en-tête du tableau dans ce style.

J'utilise .less la précompilation.

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

rrree

De cette façon, vous ne pouvez modifier que le style du tableau dans le fichier actuel.

Au fait, voici l'héritage de style de .less, via (&:extend (nom de classe hérité)).

.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);
        }
    }
}

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!