Ant Design CSS Override Handbuch

Diese Seite bietet ein detailliertes Handbuch zum Überschreiben von Ant Design-Styles, einschließlich der Anpassung von Komponenten-Styles, der Konfiguration von Themes und der Handhabung von CSS-Prioritäten.

Theme-Anpassung

Ant Design ermöglicht es, den Gesamtstil durch die Konfiguration eines Themes anzupassen. Die Theme-Konfiguration wird hauptsächlich über Less-Variablen realisiert.

Konfigurationsmethode

Installieren Sie less und less-loader in Ihrem Projekt:
```
npm install less less-loader --save-dev
```

Erstellen Sie vue.config.js im Projektverzeichnis (für Vue CLI-Projekte) oder ändern Sie config-overrides.js (für CRA-Projekte) und fügen Sie den folgenden Code hinzu:

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-Variablen

Ant Design bietet eine Reihe von Less-Variablen für die Theme-Anpassung. Häufig verwendete Variablen sind:

Variable	Beschreibung	Standardwert
`@primary-color`	Hauptfarbe	`#1890ff`
`@link-color`	Linkfarbe	`@primary-color`
`@success-color`	Erfolgsfarbe	`#52c41a`
`@warning-color`	Warnfarbe	`#faad14`
`@error-color`	Fehlfarbe	`#f5222d`
`@font-size-base`	Basis-Schriftgröße	`14px`
`@heading-color`	Überschrift-Farbe	`rgba(0, 0, 0, 0.85)`
`@text-color`	Haupttext-Farbe	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Sekundärtext-Farbe	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Deaktivierte Farbe	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Komponenten/Popover-Eckenradius	`4px`
`@border-color-base`	Rahmenfarbe	`#d9d9d9`
`@box-shadow-base`	Komponentenschatten	`0 2px 8px rgba(0, 0, 0, 0.1)`

Styles überschreiben

In manchen Fällen benötigen Sie feingranulare Überschreibungen der Ant Design-Styles. Dies kann durch Erhöhung der Spezifität von CSS-Selektoren oder durch Verwendung von !important erreicht werden.

CSS-Priorität

CSS-Prioritätsregeln bestimmen, welche Regel in Kraft tritt, wenn mehrere Style-Regeln auf dasselbe Element angewendet werden. Die Priorität von hoch nach niedrig ist:

Inline-Styles
ID-Selektoren (#id)
Klassen-Selektoren (.class), Pseudoklassen (:hover) und Attribut-Selektoren ([type="text"])
Element-Selektoren (div, h1 etc.) und Pseudoelemente (::before, ::after)
Universalselektor (*) und Kombinatoren (descendant, child, adjacent sibling, general sibling)

Verwendung von !important

!important kann verwendet werden, um die Priorität einer Style-Regel zu erhöhen und deren Inkrafttreten zu erzwingen. Übermäßiger Gebrauch wird jedoch nicht empfohlen und es sollte nur als letztes Mittel eingesetzt werden.

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

Fazit

Durch Theme-Anpassung und das Überschreiben von Styles können Entwickler Ant Design-Styles flexibel an Projektanforderungen anpassen und einzigartige Anwendungsoberflächen erstellen. Weitere Informationen finden Sie in der offiziellen Ant Design Dokumentation.