Utilizarea CSS global pentru stilizarea în React

Să presupunem că avem o componentă React App, care conține un div, iar în interiorul div-ului - trei paragrafe:

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

Hai să stilizăm această componentă. Pentru asta, în aceeași folder src cu componenta noastră vom crea un fișier CSS obișnuit cu stiluri styles.css pentru tag-urile noastre.

În acest fișier pentru div vom crea clasa class1 cu stiluri:

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

Acum să adăugăm clasa class2 cu stiluri pentru primul paragraf:

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

Clasa class3 cu stiluri pentru al doilea paragraf:

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

Și, în final să creăm clasa class4 pentru ultimul paragraf:

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

Am terminat cu fișierul CSS. Rămâne să aplicăm stilurile noastre CSS, care le-am scris pentru tag-uri. Să ne întoarcem la fișierul nostru App.js cu componenta.

Primul lucru pe care trebuie neapărat să-l facem - să adăugăm la începutul fișierului linia de import a fișierului nostru de stiluri styles.css:

import './styles.css';

Acum, pentru a aplica în componentă clasele CSS din fișier, vom folosi atributul class. Pentru primul paragraf aveam clasa class2, să o aplicăm:

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

În mod similar vom adăuga clase pentru restul tag-urilor. Ca rezultat vom obține următorul cod:

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

Creați o componentă React care va conține un div, iar în div vor fi două butoane. Creați fișierul styles.css cu stiluri CSS pentru tag-urile voastre. Aplicați la tag-urile componentei stilurile scrise.