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:

function 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:

.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:

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

Klasse class3 mit Stilen für den zweiten Absatz:

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

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

.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:

import './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:

<p class="class2">text</p>

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

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

Erstellen Sie eine React-Komponente, die ein Div enthält, und im Div zwei Schaltflächen. Erstellen Sie eine Datei styles.css mit CSS-Stilen für Ihre Tags. Wenden Sie die geschriebenen Stile auf die Tags der Komponente an.