Guide de Surcharge CSS de Ant Design

Cette page fournit un guide détaillé sur la surcharge de styles Ant Design, y compris la personnalisation des styles de composants, la configuration des thèmes et la gestion des priorités CSS.

Personnalisation du thème

Ant Design permet de personnaliser le style général en configurant un thème. La configuration du thème est principalement réalisée via des variables Less.

Méthode de configuration

Installez less et less-loader dans votre projet :
```
npm install less less-loader --save-dev
```

Créez vue.config.js à la racine du projet (pour les projets Vue CLI) ou modifiez config-overrides.js (pour les projets CRA) et ajoutez le code suivant :

const { defineConfig } = require('vue-cli-plugin-antd-config');
module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
});

Variables Less

Ant Design fournit une série de variables Less pour la personnalisation des thèmes. Les variables courantes incluent :

Variable	Description	Valeur par défaut
`@primary-color`	Couleur primaire	`#1890ff`
`@link-color`	Couleur de lien	`@primary-color`
`@success-color`	Couleur de succès	`#52c41a`
`@warning-color`	Couleur d’avertissement	`#faad14`
`@error-color`	Couleur d’erreur	`#f5222d`
`@font-size-base`	Taille de police de base	`14px`
`@heading-color`	Couleur d’en-tête	`rgba(0, 0, 0, 0.85)`
`@text-color`	Couleur du texte principal	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Couleur du texte secondaire	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Couleur de désactivation	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Rayon de bordure des composants/popovers	`4px`
`@border-color-base`	Couleur de bordure	`#d9d9d9`
`@box-shadow-base`	Ombre des composants	`0 2px 8px rgba(0, 0, 0, 0.1)`

Surcharge de styles

Dans certains cas, vous pourriez avoir besoin de surcharges plus précises des styles Ant Design. Cela peut être réalisé en augmentant la spécificité des sélecteurs CSS ou en utilisant !important.

Priorité CSS

Les règles de priorité CSS déterminent quelle règle s’applique lorsque plusieurs règles de style s’appliquent au même élément. La priorité de la plus élevée à la plus basse est :

Styles en ligne (Inline styles)
Sélecteurs d’ID (#id)
Sélecteurs de classe (.class), pseudo-classes (:hover) et sélecteurs d’attributs ([type="text"])
Sélecteurs d’éléments (div, h1, etc.) et pseudo-éléments (::before, ::after)
Sélecteur universel (*) et combinateurs (descendant, child, adjacent sibling, general sibling)

Utilisation de !important

!important peut être utilisé pour augmenter la priorité d’une règle de style, forçant son application. Cependant, son utilisation excessive n’est pas recommandée et il doit servir de dernier recours.

.ant-btn {
  background-color: red !important;
}

Conclusion

Grâce à la personnalisation du thème et à la surcharge de styles, les développeurs peuvent ajuster de manière flexible les styles Ant Design en fonction des besoins du projet et créer des interfaces d’application uniques. Pour plus d’informations, veuillez vous référer à la documentation officielle d’Ant Design.