Ghid de Suprascriere CSS Ant Design

Această pagină oferă un ghid detaliat despre suprascrierea stilurilor Ant Design, inclusiv cum să personalizați stilurile componentelor, să configurați temele și să gestionați prioritățile CSS.

Personalizarea temei

Ant Design permite personalizarea stilului general prin configurarea unei teme. Configurarea temei se realizează în principal prin variabile Less.

Metoda de configurare

Instalați less și less-loader în proiectul dumneavoastră:
```
npm install less less-loader --save-dev
```

Creați vue.config.js în folderul rădăcină al proiectului (pentru proiecte Vue CLI) sau modificați config-overrides.js (pentru proiecte CRA) și adăugați următorul cod:

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

Variabile Less

Ant Design oferă o serie de variabile Less pentru personalizarea temei. Variabilele comune includ:

Variabilă	Descriere	Valoare implicită
`@primary-color`	Culoare principală	`#1890ff`
`@link-color`	Culoarea link-ului	`@primary-color`
`@success-color`	Culoarea de succes	`#52c41a`
`@warning-color`	Culoarea de avertizare	`#faad14`
`@error-color`	Culoarea de eroare	`#f5222d`
`@font-size-base`	Dimensiunea de bază a fontului	`14px`
`@heading-color`	Culoarea titlurilor	`rgba(0, 0, 0, 0.85)`
`@text-color`	Culoarea textului principal	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Culoarea textului secundar	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Culoarea pentru starea dezactivată	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Raza bordurii componentelor/popover-elor	`4px`
`@border-color-base`	Culoarea bordurii	`#d9d9d9`
`@box-shadow-base`	Umbra componentelor	`0 2px 8px rgba(0, 0, 0, 0.1)`

Suprascrierea stilului

În unele cazuri, s-ar putea să aveți nevoie de suprascrieri mai detaliate ale stilurilor Ant Design. Acest lucru poate fi realizat prin creșterea specificității selectorilor CSS sau prin utilizarea !important.

Prioritate CSS

Regulile de prioritate CSS determină care regulă intră în vigoare atunci când mai multe reguli de stil sunt aplicate aceluiași element. Prioritatea de la mare la mic este:

Stiluri inline (Inline styles)
Selectori de ID (#id)
Selectori de clasă (.class), pseudo-clase (:hover) și selectori de atribute ([type="text"])
Selectori de elemente (div, h1 etc.) și pseudo-elemente (::before, ::after)
Selectorul universal (*) și combinatori (descendant, child, adjacent sibling, general sibling)

Utilizarea !important

!important poate fi utilizat pentru a mări prioritatea unei reguli de stil, forțând intrarea acesteia în vigoare. Cu toate acestea, nu se recomandă utilizarea excesivă, trebuind să fie ultima soluție.

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

Concluzie

Prin personalizarea temei și suprascrierea stilului, dezvoltatorii pot ajusta flexibil aspectul Ant Design în funcție de nevoile proiectului și pot crea interfețe de aplicație unice. Pentru informații suplimentare, consultați documentația oficială Ant Design.