Ant Design CSS Override Handleiding

Deze pagina biedt een gedetailleerde handleiding over het overschrijven van Ant Design stijlen, inclusief het aanpassen van componentstijlen, het configureren van thema’s en het afhandelen van CSS-prioriteiten.

Thema Aanpassing

Ant Design stelt u in staat om de algemene stijl aan te passen door een thema te configureren. Thema-configuratie wordt voornamelijk bereikt via Less variabelen.

Configuratiemethode

Installeer less en less-loader in uw project:
```
npm install less less-loader --save-dev
```

Maak vue.config.js aan in de hoofdmap van het project (voor Vue CLI projecten) of wijzig config-overrides.js (voor CRA projecten) en voeg de volgende code toe:

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

Less Variabelen

Ant Design biedt een reeks Less variabelen voor thema-aanpassing. Veelvoorkomende variabelen zijn:

Variabele	Beschrijving	Standaardwaarde
`@primary-color`	Primaire kleur	`#1890ff`
`@link-color`	Linkkleur	`@primary-color`
`@success-color`	Succeskleur	`#52c41a`
`@warning-color`	Waarschuwingskleur	`#faad14`
`@error-color`	Foutkleur	`#f5222d`
`@font-size-base`	Basis lettergrootte	`14px`
`@heading-color`	Koptekst kleur	`rgba(0, 0, 0, 0.85)`
`@text-color`	Primaire tekstkleur	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Secundaire tekstkleur	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Uitgeschakelde kleur	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Component/popover border radius	`4px`
`@border-color-base`	Randkleur	`#d9d9d9`
`@box-shadow-base`	Component schaduw	`0 2px 8px rgba(0, 0, 0, 0.1)`

Stijl Overschrijven

In sommige gevallen heeft u mogelijk meer gedetailleerde overrides van de Ant Design stijlen nodig. Dit kan worden bereikt door de specificiteit van CSS-selectors te verhogen of door !important te gebruiken.

CSS Prioriteit

CSS-prioriteitsregels bepalen welke regel van kracht wordt wanneer meerdere stijlregels op hetzelfde element worden toegepast. De prioriteit van hoog naar laag is:

Inline stijlen (Inline styles)
ID-selectors (#id)
Class-selectors (.class), pseudo-classes (:hover) en attribuut-selectors ([type="text"])
Element-selectors (div, h1, etc.) en pseudo-elementen (::before, ::after)
Universele selector (*) en combinatoren (descendant, child, adjacent sibling, general sibling)

Gebruik van !important

!important kan worden gebruikt om de prioriteit van een stijlregel te verhogen, waardoor deze gedwongen wordt om van kracht te worden. Overmatig gebruik wordt echter niet aanbevolen en het moet als laatste redmiddel worden gebruikt.

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

Conclusie

Door middel van thema-aanpassing en stijloverschrijvingen kunnen ontwikkelaars flexibel de Ant Design stijlen aanpassen aan de projectvereisten en unieke applicatie-interfaces creëren. Raadpleeg voor meer informatie de officiële Ant Design documentatie.