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 mithilfe von Klassennamen auf Komponenten anwenden, genau wie in der klassischen Webentwicklung.

Erstellen einer externen CSS-Datei

Erstellen Sie zunächst eine CSS-Datei und definieren Sie Ihre Stile:

/* 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, importieren Sie die CSS-Datei in Ihre Komponenten-Datei:

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.

Wie externes CSS in React funktioniert

CSS-Dateien werden standardmäßig global angewendet. Jede Komponente kann eine in einer importierten CSS-Datei definierte Klasse verwenden. Die Styles verhalten sich genauso wie in herkömmlichem HTML und CSS. Dadurch ist externes CSS vertraut und einfach zu verwenden, insbesondere für Entwickler mit Erfahrung in der klassischen Webentwicklung.

Wann externes CSS verwendet werden sollte

Externes CSS ist eine gute Wahl, 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.