Guida alla Sovrascrittura CSS di Ant Design

Questa pagina fornisce una guida dettagliata sulla sovrascrittura degli stili di Ant Design, inclusa la personalizzazione degli stili dei componenti, la configurazione dei temi e la gestione delle priorità CSS.

Personalizzazione del tema

Ant Design consente di personalizzare lo stile generale configurando un tema. La configurazione del tema viene realizzata principalmente tramite variabili Less.

Metodo di configurazione

Installa less e less-loader nel tuo progetto:
```
npm install less less-loader --save-dev
```

Crea vue.config.js nella root del progetto (per progetti Vue CLI) o modifica config-overrides.js (per progetti CRA) e aggiungi il seguente codice:

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

Variabili Less

Ant Design fornisce una serie di variabili Less per la personalizzazione del tema. Le variabili comuni includono:

Variabile	Descrizione	Valore predefinito
`@primary-color`	Colore primario	`#1890ff`
`@link-color`	Colore del link	`@primary-color`
`@success-color`	Colore di successo	`#52c41a`
`@warning-color`	Colore di avviso	`#faad14`
`@error-color`	Colore di errore	`#f5222d`
`@font-size-base`	Dimensione del font di base	`14px`
`@heading-color`	Colore delle intestazioni	`rgba(0, 0, 0, 0.85)`
`@text-color`	Colore del testo principale	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Colore del testo secondario	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Colore disabilitato	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Raggio del bordo di componenti/popovers	`4px`
`@border-color-base`	Colore del bordo	`#d9d9d9`
`@box-shadow-base`	Ombra dei componenti	`0 2px 8px rgba(0, 0, 0, 0.1)`

Sovrascrittura degli stili

In alcuni casi, potresti aver bisogno di sovrascritture più granulari degli stili di Ant Design. Questo può essere ottenuto aumentando la specificità dei selettori CSS o utilizzando !important.

Priorità CSS

Le regole di priorità CSS determinano quale regola ha effetto quando più regole di stile vengono applicate allo stesso elemento. La priorità dalla più alta alla più bassa è:

Stili in linea (Inline styles)
Selettori ID (#id)
Selettori di classe (.class), pseudo-classi (:hover) e selettori di attributi ([type="text"])
Selettori di elementi (div, h1, ecc.) e pseudo-elementi (::before, ::after)
Selettore universale (*) e combinatori (descendant, child, adjacent sibling, general sibling)

Utilizzo di !important

!important può essere utilizzato per aumentare la priorità di una regola di stile, forzandone l’applicazione. Tuttavia, se ne sconsiglia l’uso eccessivo e dovrebbe essere usato come ultima risorsa.

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

Conclusione

Attraverso la personalizzazione del tema e la sovrascrittura degli stili, gli sviluppatori possono adattare in modo flessibile gli stili di Ant Design in base ai requisiti del progetto e creare interfacce applicative uniche. Per ulteriori informazioni consultare la documentazione ufficiale di Ant Design.