Utilisation du CSS global pour le style dans React

Supposons que nous ayons un composant React App, dans lequel il y a une div, et à l'intérieur de la div - trois paragraphes :

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

Stylisons ce composant. Pour cela, dans le même dossier src que notre composant, créons un fichier CSS normal avec des styles styles.css pour nos balises.

Dans ce fichier, créons une classe class1 avec des styles pour la div :

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

Maintenant, ajoutons la classe class2 avec des styles pour le premier paragraphe :

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

La classe class3 avec des styles pour le deuxième paragraphe :

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

Et, enfin, créons la classe class4 pour le dernier paragraphe :

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

Nous avons terminé avec le fichier CSS. Il reste à appliquer nos styles CSS que nous avons écrits pour les balises. Revenons à notre fichier App.js avec le composant.

La première chose que nous devons absolument faire - est d'ajouter en haut du fichier une ligne d'importation de notre fichier de styles styles.css :

import './styles.css';

Maintenant, pour appliquer dans le composant les classes CSS du fichier, utilisons l'attribut class. Pour le premier paragraphe, nous avions la classe class2, appliquons-la :

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

Ajoutons de manière similaire les classes pour les autres balises. Nous obtiendrons ainsi le code suivant :

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

Créez un composant React qui contiendra une div, et dans la div, il y aura deux boutons. Créez un fichier styles.css avec des styles CSS pour vos balises. Appliquez aux balises du composant les styles écrits.