CSS-in-JS: Styled-components und Emotion
Schreiben Sie Komponentenstile als getaggte Template Literals mit styled-components oder verwenden Sie die css-Prop mit Emotion und nutzen Sie Props für dynamische Stile.
CSS-in-JS: Styled-components und Emotion ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist CSS-in-JS?
CSS-in-JS definiert Komponentenstyles direkt in JavaScript oder TypeScript. Die Styles befinden sich zusammen mit den Komponenten am selben Ort, unterstützen dynamische Werte aus Props und werden automatisch auf einen Bereich begrenzt. Die beiden beliebtesten Bibliotheken sind styled-components und Emotion.
Grundlagen von styled-components
Verwenden Sie getaggte Template-Literale, um Styled Components zu definieren. Das Ergebnis ist eine React-Komponente, die ein HTML-Element mit angewendeten Styles rendert.
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? '#6366f1' : 'white'};
color: ${props => props.primary ? 'white' : '#6366f1'};
padding: 8px 16px;
border: 2px solid #6366f1;
border-radius: 4px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
`;
<Button primary>Primary</Button>
<Button>Outline</Button>Emotion – css-Prop
Die css-Prop von Emotion wendet Styles auf jedes JSX-Element an. Dafür benötigen Sie das Pragma @emotion/react oder das Babel-Preset.
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
function Card({ featured }: { featured?: boolean }) {
return (
<div css={css`
padding: 16px;
border-radius: 8px;
border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
`}>
Content
</div>
);
}Dynamische Styles aus Props
Beide Bibliotheken können Props auslesen, um Styles zu berechnen. Das ist ihr wichtigster Vorteil gegenüber statischem CSS – ein Wechsel von Klassen ist nicht erforderlich.
Theming mit ThemeProvider
styled-components und Emotion unterstützen beide einen ThemeProvider, der Theme-Werte in alle Styled Components einschleust.
import { ThemeProvider } from 'styled-components';
const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
// Access in styled component:
const Card = styled.div`
background: ${props => props.theme.colors.bg};
padding: ${props => props.theme.space.md}px;
`;Styled Components erweitern
Erweitern Sie eine vorhandene Styled Component, um eine Variante zu erstellen, ohne Styles zu duplizieren.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Globale Styles
Verwenden Sie createGlobalStyle (styled-components) oder Global (Emotion) für globales CSS wie Body-Styles und Resets.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>Laufzeitkosten von CSS-in-JS
CSS-in-JS-Bibliotheken fügen Styles zur Laufzeit über JavaScript ein. Dadurch entstehen CPU-Kosten für das Parsen und Einfügen der Styles, außerdem wird das JavaScript-Bundle größer. Alternativen ohne Laufzeitaufwand wie vanilla-extract und linaria erzeugen statisches CSS während des Build-Prozesses.
Alternativen ohne Laufzeitaufwand
vanilla-extract: Sie schreiben Styles in TypeScript, die anschließend in statisches CSS kompiliert werden. linaria: CSS-in-JS-Syntax, die in CSS Modules kompiliert wird. Beide bieten die komfortable Verwendung von CSS-in-JS ohne Laufzeitaufwand.
TypeScript mit styled-components
Definieren Sie einen ThemeType und erweitern Sie das DefaultTheme-Interface von styled-components, um vollständig typisierte Themes zu erhalten.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}Wann Sie CSS-in-JS wählen sollten
CSS-in-JS eignet sich hervorragend für dynamische Styles, die von JavaScript-Werten zur Laufzeit gesteuert werden, für Designsysteme mit hohem Bedarf an Theming und für Teams, die einen JavaScript-zentrierten Workflow bevorzugen. Die Laufzeitkosten sind für Benutzeroberflächen, bei denen Performance nicht kritisch ist, normalerweise vertretbar.
Kurzer Test
Welcher wesentliche Nachteil entsteht bei CSS-in-JS-Bibliotheken mit Laufzeitverarbeitung im Vergleich zu statischen CSS-Lösungen?
Zusammenfassung: CSS-in-JS
Styled-components: getaggte Template-Literale, die ein gestyltes React-Element rendern. Emotion: css-Prop oder styled-API. Dynamische Styles aus Props machen den Wechsel von Klassen überflüssig. ThemeProvider schleust Theme-Werte ein. createGlobalStyle dient für globales CSS. Die Laufzeitkosten sind der wichtigste Nachteil. Alternativen ohne Laufzeitaufwand: vanilla-extract und linaria.
Häufig gestellte Fragen
Ist die Lektion „CSS-in-JS: Styled-components und Emotion“ kostenlos?
Ja — der vollständige Text von „CSS-in-JS: Styled-components und Emotion“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „CSS-in-JS: Styled-components und Emotion“?
Schreiben Sie Komponentenstile als getaggte Template Literals mit styled-components oder verwenden Sie die css-Prop mit Emotion und nutzen Sie Props für dynamische Stile. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 3 von 4.
Wie lange dauert die Lektion „CSS-in-JS: Styled-components und Emotion“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- BEM-Methodik: Block, Element, Modifier
- CSS Modules: bereichsbezogene Klassennamen
- CSS-in-JS: Styled-components und Emotion
- Tailwind CSS: Utility-First-Ansatz