Guida alla sovrascrittura degli stili CSS di Ant Design

Questa pagina fornisce una guida dettagliata alla sovrascrittura degli stili di Ant Design, inclusa la personalizzazione degli stili dei componenti, la configurazione dei temi, la gestione della specificità CSS e altro ancora.

Personalizzazione del tema

Ant Design consente di personalizzare lo stile generale configurando il tema, operazione ottenuta 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 (per i progetti Vue CLI) o modifica config-overrides.js (per i progetti CRA) nella root del progetto con 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 dei link	`@primary-color`
`@success-color`	Colore successo	`#52c41a`
`@warning-color`	Colore avviso	`#faad14`
`@error-color`	Colore errore	`#f5222d`
`@font-size-base`	Dimensione carattere base	`14px`
`@heading-color`	Colore intestazioni	`rgba(0, 0, 0, 0.85)`
`@text-color`	Colore testo principale	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Colore testo secondario	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Colore disabilitato	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Raggio bordo componente/livello	`4px`
`@border-color-base`	Colore del bordo	`#d9d9d9`
`@box-shadow-base`	Ombra componente	`0 2px 8px rgba(0, 0, 0, 0.1)`

Sovrascrittura degli stili (Style Overriding)

In alcuni casi, potrebbe essere necessario eseguire una sovrascrittura più granulare degli stili di Ant Design. Ciò può essere ottenuto aumentando la specificità dei selettori CSS o utilizzando !important.

Priorità CSS (Specificità)

Le regole di specificità CSS determinano quale regola viene applicata a un elemento quando ad esso si applicano più regole di stile. L’ordine di priorità dal più alto al più basso è:

Stili inline (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 e forzarne l’applicazione. Tuttavia, non è consigliabile abusarne; dovrebbe essere l’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 alle esigenze del progetto per creare un’interfaccia applicativa unica. Per ulteriori informazioni, consultare la documentazione ufficiale di Ant Design.