0Pricing
CSS Academy · Lektion

Emotion: css() und styled()

Wenden Sie mit Emotions css()-Helper und der styled()-Komponentenfabrik dynamische Stile an.

Emotion: css() und styled() ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Emotion?

Emotion ist eine CSS-in-JS-Bibliothek mit einer flexiblen API. Sie bietet zwei Hauptansätze: die css()-Funktion (frameworkunabhängig) und die styled()-API (ähnlich wie styled-components). Beide erzeugen automatisch Klassennamen mit begrenztem Gültigkeitsbereich.

Emotion installieren

Je nach Bedarf gibt es zwei Pakete:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

Die Funktion css()

Die css()-Funktion erzeugt aus einem CSS-Objekt oder einem Template-Literal einen Klassennamen:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

CSS-Objekte mit css()

Die Objektsyntax ist eine Alternative zu Template-Literalen – praktisch für die TypeScript-Autovervollständigung:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

styled()-API

Emotions styled funktioniert beim Wechsel zwischen beiden Bibliotheken identisch zu styled-components:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

css-Prop (Inline-Styling)

Mit Emotions css-Prop können Sie Styles direkt auf JSX-Elementen schreiben – ganz ohne zusätzliche Komponente. Dafür benötigen Sie das Paket @emotion/react sowie ein Babel-/SWC-Plugin:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Dynamische Styles mit Emotion

Beide APIs akzeptieren Funktionen, die Props für dynamische Werte erhalten:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Globales Styling

Verwenden Sie Global aus @emotion/react für globales CSS:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion im Vergleich zu styled-components

Emotion und styled-components haben nahezu identische APIs. Emotion bietet in Benchmarks eine etwas bessere Performance, eine kleinere Bundle-Größe und mit der css-Prop eine zusätzliche API. Beide sind in der Praxis bewährte Optionen für React-Apps.

Keyframes in Emotion

Definieren Sie Animationen mit dem keyframes-Helper:

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

Serverseitiges Rendering

Emotion unterstützt SSR über extractCriticalToChunks(). Damit können Sie beim serverseitigen Rendern in React-Frameworks wie Next.js kritisches CSS sammeln und einfügen.

Schnelltest

Was ist der wesentliche Unterschied zwischen Emotions css()-Funktion und der styled()-API?

Zusammenfassung

Emotion bietet zwei zentrale Styling-APIs: css() erzeugt Klassennamen, die Sie über className anwenden, während styled() gestylte React-Komponenten erstellt. Die css-Prop ermöglicht eine Schreibweise ähnlich wie bei Inline-Styles, bietet aber die vollständige Leistungsfähigkeit von CSS. Emotion ist hinsichtlich der API weitgehend mit styled-components kompatibel und oft schneller. Beide Ansätze begrenzen Styles automatisch über generierte Klassennamen auf ihren Gültigkeitsbereich.

Häufig gestellte Fragen

Ist die Lektion „Emotion: css() und styled()“ kostenlos?

Ja — der vollständige Text von „Emotion: css() und styled()“ 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 „Emotion: css() und styled()“?

Wenden Sie mit Emotions css()-Helper und der styled()-Komponentenfabrik dynamische Stile an. 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 2 von 4.

Wie lange dauert die Lektion „Emotion: css() und styled()“?

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

  1. Styled-components: getaggte Template-Literale
  2. Emotion: css() und styled()
  3. CSS Modules: lokale Stile
  4. Vanilla Extract: CSS-in-JS ohne Laufzeit
← Zurück zu CSS Academy