Styling mit der CSS-Datei

Die Verwendung einer CSS-Datei zum Stylen von React-Komponenten stammt aus der traditionellen HTML-CSS-Struktur. Hier ist eine Schritt-für-Schritt-Anleitung, wie wir eine CSS-Datei verwenden können, um React-Komponenten zu stylen:

1. Erstellen Sie eine CSS-Datei

Zunächst erstellen Sie eine separate CSS-Datei mit der Erweiterung .css. Diese Datei kann sich im selben Ordner wie die Komponente oder in einem speziellen Ordner für Stile befinden, in dem alle CSS-Dateien zusammen organisiert sind.

Beispiel:

2. Importieren der CSS-Datei

Verwenden Sie die 'import'-Anweisung, um CSS-Dateien in die Komponentendatei zu importieren. Platzieren Sie diese Importanweisung am Anfang der Komponentendatei. Geben Sie innerhalb der Anführungszeichen '' den entsprechenden Dateipfad an.

Beispiel:

Wenn sich die CSS-Datei im Ordner styles befindet, hätte die Importanweisung die folgende Syntax:

Hinweis

Verwenden Sie die Punkt- und Schrägstrich-Notation ./, um auf eine Datei im selben Verzeichnis zu verweisen. Um auf eine Datei außerhalb des aktuellen Ordners zuzugreifen und zum übergeordneten Verzeichnis zu navigieren, verwenden Sie zwei Punkte und einen Schrägstrich ../.

3. Anwenden von Stilen auf die Komponente

Sobald die Stile importiert wurden, wird Ihre Komponente sich der Anwesenheit der CSS bewusst. Folglich können Sie CSS-Selektoren und Klassennamen verwenden, um die Elemente zu stylen. Der einzige Unterschied besteht darin, dass wir in React-Anwendungen das Attribut className anstelle des in HTML-Dateien verwendeten Attributs class verwenden.

Beispiel:

Jetzt können wir die CSS-Klassen container, title und description verwenden, um die Elemente innerhalb der Block-Komponente zu stylen.

Hinzufügen von Stilen

An diesem Punkt können wir die CSS-Datei öffnen und Stile auf die definierten Klassennamen anwenden. Zum Beispiel könnte die Datei index.css die folgenden Stile enthalten:

Indem wir diese Schritte befolgen, werden wir die in der CSS-Datei definierten Stile auf die entsprechenden Elemente in der React-Komponente anwenden.

Vollständiger App-Code: