Ghid de suprascriere a stilului CSS Ant Design

Această pagină oferă un ghid detaliat pentru suprascrierea stilurilor Ant Design, inclusiv modul de personalizare a stilurilor componentelor, configurarea temelor, gestionarea specificității CSS și multe altele.

Personalizarea temei

Ant Design permite personalizarea stilului general prin configurarea temei, lucru realizat î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 (pentru proiecte Vue CLI) sau modificați config-overrides.js (pentru proiecte CRA) în rădăcina proiectului cu 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 primară	`#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 fontului de bază	`14px`
`@heading-color`	Culoarea titlului	`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 dezactivată	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Raza bordurii componentei/stratului	`4px`
`@border-color-base`	Culoarea bordurii	`#d9d9d9`
`@box-shadow-base`	Umbra componentei	`0 2px 8px rgba(0, 0, 0, 0.1)`

Suprascrierea stilului (Style Overriding)

În unele cazuri, poate fi necesară o suprascriere mai granulară a stilurilor Ant Design. Acest lucru poate fi realizat prin creșterea specificității selectorilor CSS sau prin utilizarea !important.

Prioritatea CSS (Specificitate)

Regulile de specificitate CSS determină ce regulă este aplicată unui element atunci când mai multe reguli de stil se aplică acestuia. Ordinea de prioritate de la mare la mic este:

Stiluri inline (Inline styles)
Selectori 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)
Selector universal (*) și combinatori (descendant, child, adjacent sibling, general sibling)

Utilizarea !important

!important poate fi utilizat pentru a crește prioritatea unei reguli de stil și a o forța să intre în vigoare. Cu toate acestea, nu se recomandă abuzul de acesta; ar trebui să fie ultima soluție.

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

Concluzie

Prin personalizarea temei și suprascrierea stilurilor, dezvoltatorii pot ajusta flexibil stilurile Ant Design conform nevoilor proiectului pentru a construi o interfață unică a aplicației. Pentru mai multe informații, vă rugăm să consultați documentația oficială Ant Design.