Styling von React-Komponenten mit Emotion

Du möchtest das Styling von React-Komponenten auf eine moderne und leistungsstarke Weise handhaben? Mit der Bibliothek Emotion kannst du CSS direkt in deinen React-Komponenten integrieren und so deine Benutzeroberfläche effektiv gestalten. In dieser Anleitung erkläre ich dir die Grundzüge des Stylings mit Emotion, wie du die Bibliothek installierst und anwendest und gebe dir einige nützliche Tipps dazu.

Wichtigste Erkenntnisse

• Emotion ermöglicht es, CSS in JavaScript zu schreiben und bietet eine intuitive Handhabung.
• Mit Emotion kannst du verschiedene Styling-Techniken nutzen, darunter Template Literals und die Verwendung des css-Props.
• Style-Management wird durch die Nutzung von Emotion modularer, was die Wiederverwendbarkeit und Lesbarkeit verbessert.

Schritt-für-Schritt-Anleitung

1. Emotion installieren

Zunächst musst du Emotion in deinem Projekt installieren. Öffne das Terminal und navigiere in das Verzeichnis deines Projekts. Hier führst du den folgenden Befehl aus, um die emotion Bibliothek zu installieren:

npm install @emotion/react @emotion/styled

2. CSS importieren

In deiner App.jsx-Datei kannst du Emotion nutzen. Du solltest Emotion importieren, um die css-Funktion zu verwenden sowie das styled-Element zu importieren. Füge Folgendes an den Anfang deiner Datei hinzu:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Styling mit Template Literals

Verwende die css-Funktion von Emotion, um eine CSS-Variable zu erstellen. Definiere die CSS-Konventionen mithilfe von Template Literals. Hier ist ein Beispiel, wie du eine Wrapper-Klasse für deine App schreiben kannst:

const appStyle = css`
  display: flex;
  flex-direction: column;
  font-size: 16px;
`;

Dieser Code blockiert die Nutzung der flexbox, um eine Layout-Anordnung zu sichern.

4. Anwendung des Styles

Um den definierten Stil anzuwenden, übergib die appStyle-Variable in dem className-Prop deines Haupt-HTML-Elements. Hier ist, wie das aussehen sollte:

function App() {
  return <div css={appStyle}>Hallo Welt!</div>;
}

5. Nutzung von Styled-Components

Zusätzlich zur Nutzung der css-Variable kannst du auch Styled-Components mit Emotion verwenden. Um eine Styled-Komponente zu erstellen, kannst du den folgenden Code verwenden:

const Container = styled.div`
  padding: 20px;
  background-color: lightblue;
`;

Hiermit wird Container eine neue auf CSS basierende Komponente, die alle definierten Stile hat.

6. Einfügen von Medienabfragen

Emotion macht es einfach, Medienabfragen in deinen CSS zu integrieren. Füge sie einfach in den Template Literal ein:

const responsiveStyle = css`
  @media (max-width: 600px) {
    font-size: 14px;
  }
`;

Diese Medienabfrage ändert die Schriftgröße des Textes, wenn die Anzeige breite weniger als 600 Pixel ist.

7. Hover-Effekte einsetzen

Ebenfalls kannst du Hover-Effekte ganz leicht in deinen CSS`-Templates definieren:

const buttonStyle = css`
  background-color: blue;
  color: white;
  &:hover {
    background-color: darkblue;
  }
`;

Diese CSS-Regel ändert die Hintergrundfarbe des Elements beim Überfahren mit der Maus.

8. Komplexere Styles kombinieren

Emotion erlaubt das Kombinieren mehrerer Class-Namen. Das wird mit der cx-Funktion ermöglicht:

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

const primaryStyle = css color: blue; ;

const secondaryStyle = css color: red; ;

In diesem Fall wird der Text sowohl blau als auch rot dargestellt.

9. Zukünftige Erweiterungen

Wenn du in Zukunft ein großes Projekt verwaltest, kann es hilfreich sein, deine Stile in verschiedenen Modulen zu organisieren. Du kannst zum Beispiel commonStyles.js erstellen und deine grundlegenden Styles dort exportieren:

// commonStyles.js
export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

Jetzt kannst du flexCenter in jeder anderen Komponente einfügen.

10. Tests und Anpassungen

Lade deine Anwendung im Browser und überprüfe, ob die Stile korrekt angezeigt werden. Experimentiere mit verschiedenen Stilen und schau dir das Ergebnis in Echtzeit an.

Zusammenfassung

Mit einer Kombination aus Emotion und React ist es möglich, inzwischen realistische UI-Layouts zu erstellen. Emotion erlaubt es, CSS direkt in JavaScript zu definieren und effektiv zu verwalten. Dabei kannst du von den Vorteilen des Screendichtes und eine enge Integration zwischen Logik und Styling profitieren.