Przewodnik nadpisywania stylów CSS Ant Design

Ta strona zawiera szczegółowy przewodnik po nadpisywaniu stylów Ant Design, w tym instrukcje dotyczące dostosowywania stylów komponentów, konfigurowania motywów i obsługi priorytetów CSS.

Dostosowywanie motywu

Ant Design umożliwia dostosowanie ogólnego stylu poprzez konfigurację motywu. Konfiguracja motywu odbywa się głównie za pomocą zmiennych Less.

Metoda konfiguracji

Zainstaluj less i less-loader w swoim projekcie:
```
npm install less less-loader --save-dev
```

Utwórz plik vue.config.js w katalogu głównym projektu (dla projektów Vue CLI) lub zmodyfikuj config-overrides.js (dla projektów CRA) i dodaj następujący kod:

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

Zmienne Less

Ant Design udostępnia szereg zmiennych Less do dostosowywania motywu. Typowe zmienne to:

Zmienna	Opis	Wartość domyślna
`@primary-color`	Kolor główny	`#1890ff`
`@link-color`	Kolor linków	`@primary-color`
`@success-color`	Kolor sukcesu	`#52c41a`
`@warning-color`	Kolor ostrzeżenia	`#faad14`
`@error-color`	Kolor błędu	`#f5222d`
`@font-size-base`	Bazowy rozmiar czcionki	`14px`
`@heading-color`	Kolor nagłówków	`rgba(0, 0, 0, 0.85)`
`@text-color`	Główny kolor tekstu	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Drugorzędny kolor tekstu	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Kolor stanu wyłączonego	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Promień obramowania komponentów/popoverów	`4px`
`@border-color-base`	Kolor obramowania	`#d9d9d9`
`@box-shadow-base`	Cień komponentu	`0 2px 8px rgba(0, 0, 0, 0.1)`

Nadpisywanie stylów

W niektórych przypadkach może być konieczne bardziej szczegółowe nadpisanie stylów Ant Design. Można to osiągnąć poprzez zwiększenie specyficzności selektorów CSS lub użycie !important.

Priorytet CSS

Reguły priorytetów CSS określają, która reguła ma pierwszeństwo, gdy wiele reguł stylu jest stosowanych do tego samego elementu. Priorytet od najwyższego do najniższego:

Style liniowe (Inline styles)
Selektory ID (#id)
Selektory klas (.class), pseudoklasy (:hover) i selektory atrybutów ([type="text"])
Selektory elementów (div, h1 itp.) i pseudoelementy (::before, ::after)
Selektor uniwersalny (*) i kombinatory (descendant, child, adjacent sibling, general sibling)

Użycie !important

!important może być użyte do zwiększenia priorytetu reguły stylu, wymuszając jej zastosowanie. Nie zaleca się jednak nadużywania tego rozwiązania; powinno być ono stosowane jako ostateczność.

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

Podsumowanie

Poprzez dostosowywanie motywów i nadpisywanie stylów programiści mogą elastycznie dostosowywać wygląd Ant Design do wymagań projektu i tworzyć unikalne interfejsy aplikacji. Aby uzyskać więcej informacji, zapoznaj się z oficjalną dokumentacją Ant Design.