Verwendung von globalem CSS für das Styling in React

Angenommen, wir haben eine React-Komponente App, in der sich ein Div befindet, und innerhalb des Divs drei Absätze:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Lassen Sie uns diese Komponente gestalten. Dazu erstellen wir im selben Ordner src wie unsere Komponente eine normale CSS-Datei mit Stilen styles.css für unsere Tags.

In dieser Datei erstellen wir für das Div eine Klasse class1 mit Stilen:

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

Nun fügen wir die Klasse class2 mit Stilen für den ersten Absatz hinzu:

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

Klasse class3 mit Stilen für den zweiten Absatz:

styles.css.class3 {
  font-style: italic;
  color: brown;
}

Und schließlich erstellen wir die Klasse class4 für den letzten Absatz:

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

Mit der CSS-Datei sind wir fertig. Es bleibt nur noch, unsere CSS-Stile, die wir für die Tags geschrieben haben, anzuwenden. Kehren wir zu unserer Datei App.js mit der Komponente zurück.

Das Erste, was wir unbedingt tun müssen - ist, am Anfang der Datei eine Import-Zeile für unsere Stildatei styles.css hinzuzufügen:

App.jsimport './styles.css';

Nun, um in der Komponente die CSS-Klassen aus der Datei anzuwenden, verwenden wir das Attribut class. Für den ersten Absatz hatten wir die Klasse class2, wenden wir sie an:

App.js<p class="class2">text</p>

Ähnlich fügen wir Klassen für die restlichen Tags hinzu. Als Ergebnis erhalten wir den folgenden Code:

App.js<div class="class1">
  <p class="class2">text</p>
  <p class="class3">text</p>
  <p class="class4">text</p>
</div>