Guide för CSS-överskrivning i Ant Design

Denna sida ger en detaljerad guide om överskrivning av stilar i Ant Design, inklusive hur du anpassar komponentstilar, konfigurerar teman och hanterar CSS-prioritet.

Temanpassning (Theme Customization)

Ant Design gör det möjligt att anpassa den övergripande stilen genom att konfigurera ett tema. Temakonfiguration uppnås främst via Less-variabler.

Konfigurationsmetod

Installera less och less-loader i ditt projekt:
```
npm install less less-loader --save-dev
```

Skapa vue.config.js i projektets rot (för Vue CLI-projekt) eller ändra config-overrides.js (för CRA-projekt) och lägg till följande 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,
        },
      },
    },
  },
});

Less-variabler

Ant Design tillhandahåller en serie Less-variabler för temaanpassning. Vanliga variabler inkluderar:

Variabel	Beskrivning	Standardvärde
`@primary-color`	Huvudfärg	`#1890ff`
`@link-color`	Länkfärg	`@primary-color`
`@success-color`	Framgångsfärg	`#52c41a`
`@warning-color`	Varningsfärg	`#faad14`
`@error-color`	Felmeddelandefärg	`#f5222d`
`@font-size-base`	Basstorlek för typsnitt	`14px`
`@heading-color`	Rubrikfärg	`rgba(0, 0, 0, 0.85)`
`@text-color`	Huvudtextfärg	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Sekundär textfärg	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Inaktiverad färg	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Kantradie för komponenter/popover	`4px`
`@border-color-base`	Kantfärg	`#d9d9d9`
`@box-shadow-base`	Komponentskugga	`0 2px 8px rgba(0, 0, 0, 0.1)`

Stilsöverskrivning (Style Overriding)

I vissa fall kan du behöva mer detaljerad överskrivning av Ant Design-stilar. Detta kan uppnås genom att öka specificiteten hos CSS-selektorer eller genom att använda !important.

CSS-prioritet

CSS-prioritetsregler avgör vilken regel som träder i kraft när flera stilregler tillämpas på samma element. Prioriteten från högt till lågt är:

Inline-stilar (Inline styles)
ID-selektorer (#id)
Klass-selektorer (.class), pseudoklasser (:hover) och attribut-selektorer ([type="text"])
Element-selektorer (div, h1, etc.) och pseudo-element (::before, ::after)
Universalselektor (*) och kombinatorer (descendant, child, adjacent sibling, general sibling)

Användning av !important

!important kan användas för att öka prioriteten för en stilregel, vilket tvingar den att träda i kraft. Det rekommenderas dock inte att överanvända det, det bör ses som en sista utväg.

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

Slutsats

Genom temaanpassning och stilsöverskrivning kan utvecklare flexibelt justera Ant Design-stilar efter projektets krav och skapa unika applikationsgränssnitt. För mer information, se den officiella Ant Design-dokumentationen.