Korišćenje globalnog CSS-a za stilizaciju u React-u

Pretpostavimo da imamo React komponentu App, unutar koje se nalazi div, a unutar div-a tri paragrafa:

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

Hajde da stilizujemo ovu komponentu. Za to, u istoj fascikli src gde se nalazi naša komponenta, kreiraćemo običan CSS fajl sa stilovima styles.css za naše tagove.

U ovom fajlu, za div ćemo kreirati klasu class1 sa stilovima:

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

Sada ćemo dodati klasu class2 sa stilovima za prvi paragraf:

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

Klasu class3 sa stilovima za drugi paragraf:

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

I, na kraju, kreirati klasu class4 za poslednji paragraf:

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

Završili smo sa CSS fajlom. Ostalo je da primenimo naše CSS stilove koje smo napisali za tagove. Vratimo se našem fajlu App.js sa komponentom.

Prvo što obavezno moramo da uradimo - dodati na početak fajla liniju za import našeg fajla sa stilovima styles.css:

import './styles.css';

Sada, da bismo primenili u komponenti CSS klase iz fajla, upotrebićemo atribut class. Za prvi paragraf imali smo klasu class2, hajde da je primenimo:

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

Na isti način ćemo dodati klase za preostale tagove. Kao rezultat, dobićemo sledeći kod:

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

Kreirajte React komponentu koja će sadržati div, a u div-u će biti dva dugmeta. Kreirajte fajl styles.css sa CSS stilovima za vaše tagove. Primenite napisane stilove na tagove komponente.