Die Verwendung einer CSS-Datei zur Gestaltung von React-Komponenten stammt aus der traditionellen HTML-CSS-Struktur. Nachfolgend eine schrittweise Anleitung, wie eine CSS-Datei zur Gestaltung von React-Komponenten genutzt werden kann:

1. Erstellen einer CSS-Datei

Zunächst eine separate CSS-Datei mit der Endung .css anlegen. Diese Datei kann sich im selben Ordner wie die Komponente befinden oder in einem eigenen Ordner, der speziell für Styles vorgesehen ist und in dem alle CSS-Dateien organisiert werden.

Beispiel:

2. Importieren der CSS-Datei

Mit der import-Anweisung CSS-Dateien in die Komponenten-Datei importieren. Diese Import-Anweisung am Anfang der Komponenten-Datei platzieren. Innerhalb der Anführungszeichen '' den entsprechenden Dateipfad angeben.

Beispiel:

// Import the CSS file
import './index.css';

Befindet sich die CSS-Datei im Ordner styles, hat die Import-Anweisung folgende Syntax:

// Import the CSS file from a folder
import './styles/index.css';

Hinweis

Die Punkt-Schrägstrich-Notation ./ verwenden, um auf eine Datei im selben Verzeichnis zuzugreifen. Um auf eine Datei außerhalb des aktuellen Ordners zuzugreifen und in das übergeordnete Verzeichnis zu navigieren, zwei Punkte und einen Schrägstrich ../ verwenden.

3. Stile auf die Komponente anwenden

Nach dem Importieren der Styles erkennt die Komponente das Vorhandensein des CSS. Dadurch können CSS-Selektoren und Klassennamen verwendet werden, um die Elemente zu gestalten. Der einzige Unterschied besteht darin, dass in React-Anwendungen das Attribut className anstelle des in HTML-Dateien verwendeten Attributs class genutzt wird.

Beispiel:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Nun können die CSS-Klassen container, title und description verwendet werden, um die Elemente innerhalb der Block-Komponente zu gestalten.

Styling hinzufügen

An diesem Punkt kann die CSS-Datei geöffnet und Styles für die definierten Klassennamen angewendet werden. Beispielsweise kann die Datei index.css folgende Styles enthalten:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Durch diese Schritte werden die im CSS definierten Styles auf die entsprechenden Elemente in der React-Komponente angewendet.

Vollständiger App-Code: