Gebruik van globale CSS voor stijlen in React

Stel, we hebben een React-component App, waarin een div staat, en binnen de div - drie paragrafen:

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

Laten we deze component stijlen. Hiervoor maken we, in dezelfde map src als onze component, een gewoon CSS-bestand met stijlen styles.css voor onze tags.

In dit bestand maken we voor de div een klasse class1 met stijlen:

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

Nu voegen we een klasse class2 toe met stijlen voor de eerste paragraaf:

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

Klasse class3 met stijlen voor de tweede paragraaf:

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

En tenslotte maken we een klasse class4 voor de laatste paragraaf:

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

We zijn klaar met het CSS-bestand. Het enige dat overblijft is het toepassen van onze CSS-stijlen die we hebben geschreven voor de tags. Laten we terugkeren naar ons bestand App.js met de component.

Het eerste dat we absoluut moeten doen - is het toevoegen van een importregel van ons stijlbestand styles.css bovenaan het bestand:

import './styles.css';

Nu, om de CSS-classes uit het bestand toe te passen in de component, gebruiken we het attribuut class. Voor de eerste paragraaf hadden we de klasse class2, laten we deze toepassen:

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

Op een vergelijkbare manier voegen we klassen toe voor de overige tags. Als resultaat krijgen we de volgende code:

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

Maak een React-component die een div bevat, en in de div twee knoppen. Maak een bestand styles.css met CSS-stijlen voor je tags. Pas de geschreven stijlen toe op de tags van de component.