Komponenten Mit Externer CSS Stylen

Während Inline-Stile für kleine oder dynamische Anpassungen nützlich sind, setzen die meisten realen Anwendungen auf externe CSS-Dateien. Dieser Ansatz trennt das Styling von der Komponentenlogik und erleichtert die Verwaltung, insbesondere bei wachsenden Projekten.

React unterstützt externe CSS-Dateien standardmäßig. Sie können reguläres CSS schreiben und es über Klassennamen auf Komponenten anwenden, wie in der klassischen Webentwicklung.

Erstellen einer externen CSS-Datei

Zuerst eine CSS-Datei erstellen und die gewünschten Stile definieren:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Diese CSS-Datei enthält eine einfache Klasse, die in verschiedenen Komponenten wiederverwendet werden kann.

Importieren von CSS in eine Komponente

Um die Stile zu verwenden, die CSS-Datei in die Komponenten-Datei importieren:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

In React wird das Attribut class als className geschrieben, da class ein reserviertes Schlüsselwort in JavaScript ist.

Funktionsweise von externem CSS in React

CSS-Dateien werden standardmäßig global angewendet. Jede Komponente kann eine in einer importierten CSS-Datei definierte Klasse verwenden. Das Verhalten der Styles entspricht dem von Standard-HTML und CSS. Dadurch ist externes CSS vertraut und einfach zu nutzen, insbesondere für Entwickler mit Erfahrung in der klassischen Webentwicklung.

Wann externes CSS verwendet werden sollte

Externes CSS ist sinnvoll, wenn:

• Styles von mehreren Komponenten gemeinsam genutzt werden;
• Layouts komplexer werden;
• eine klare Trennung zwischen Struktur und Gestaltung gewünscht ist.

Bei größeren Projekten führt externes CSS häufig zu übersichtlicherem und besser wartbarem Code.