CSS Academy · Lektion

Styled-components: getaggte Template-Literale

Erstellen Sie mit getaggten Template-Literalen und der Bibliothek styled-components formatierte React-Komponenten.

Styled-components: getaggte Template-Literale ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Styled-components?

styled-components ist eine CSS-in-JS-Bibliothek für React, mit der Sie CSS direkt in JavaScript-Dateien mithilfe getaggter Template-Literale schreiben können. Jede Styled-Komponente erhält automatisch eindeutige, lokal begrenzte Klassennamen.

Getaggte Template-Literale

Mit getaggten Template-Literalen in JavaScript kann eine Funktion einen Template-String verarbeiten. styled-components verwendet dies zum Parsen von CSS:

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

Dynamische Styles mit Props

Greifen Sie innerhalb des Template-Literals auf die Props der Komponente zu, um dynamische Styles zu erzeugen:

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

Alternative mit benutzerdefinierten CSS-Eigenschaften

Für einfachere dynamische Werte sollten Sie benutzerdefinierte CSS-Eigenschaften gegenüber einer von Props gesteuerten Logik bevorzugen – das ist performanter und reduziert Interpolationen in JavaScript:

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

Styles erweitern

Erweitern Sie eine vorhandene Styled-Komponente, um Styles hinzuzufügen:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

Nesting und der &-Selektor

styled-components unterstützt Sass-ähnliches Nesting. Verwenden Sie & für den Verweis auf das übergeordnete Element:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

Definieren Sie globale Styles (Resets, Basis-Styles) mit createGlobalStyle:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

styled-components stellt einen ThemeProvider bereit, über den Sie in Komponenten auf Theme-Tokens zugreifen können:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>

Überlegungen zur Performance

styled-components erzeugt Klassennamen zur Laufzeit. Ziehen Sie bei performancekritischen Anwendungen die statische Extraktion mithilfe des Babel-Plugins oder den Wechsel zu Zero-Runtime-Alternativen wie Vanilla Extract oder CSS Modules in Betracht.

Serverseitiges Rendern

styled-components unterstützt SSR mit der API ServerStyleSheet, um Styles während des serverseitigen Renderns zu sammeln und einzufügen. Dadurch wird ein kurzzeitiges Anzeigen ungestylter Inhalte verhindert.

Alternativen und Ökosystem

Zum Ökosystem von styled-components gehören: emotion (ähnliche API), linaria (Zero-Runtime), Vanilla Extract (typsicher) und Panda CSS (Utility-First). Jede Lösung bietet unterschiedliche Kompromisse zwischen Laufzeitaufwand, DX und Performance.

Kurzer Test

Wie verhindert styled-components Kollisionen bei Klassennamen zwischen Komponenten?

Zusammenfassung

styled-components verwendet getaggte Template-Literale, um CSS zusammen mit React-Komponenten zu definieren. Props können über JavaScript-Interpolationen dynamische Styles steuern. Komponenten können mithilfe von ThemeProvider erweitert, verschachtelt und an Themes angepasst werden. Ziehen Sie für die Produktion das Babel-Plugin zur statischen Extraktion und die Unterstützung für serverseitiges Rendern in Betracht. Bei Zero-Runtime-Alternativen sollten Sie Vanilla Extract oder CSS Modules prüfen.

Häufig gestellte Fragen

Ist die Lektion „Styled-components: getaggte Template-Literale“ kostenlos?

Ja — der vollständige Text von „Styled-components: getaggte Template-Literale“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Styled-components: getaggte Template-Literale“?

Erstellen Sie mit getaggten Template-Literalen und der Bibliothek styled-components formatierte React-Komponenten. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Styled-components: getaggte Template-Literale“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Styled-components: getaggte Template-Literale
Emotion: css() und styled()
CSS Modules: lokale Stile
Vanilla Extract: CSS-in-JS ohne Laufzeit

← Zurück zu CSS Academy