Uporaba globalnega CSS pri stilizaciji v Reactu

Predpostavimo, da imamo React komponento App, v kateri je div, znotraj divja pa so trije odstavki:

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

Oblikujmo to komponento. Za to v isti mapi src z našo komponento ustvarimo običajno CSS datoteko s slogi styles.css za naše oznake.

V tej datoteki za div ustvarimo razred class1 s slogi:

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

Zdaj dodajmo razred class2 s slogi za prvi odstavek:

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

Razred class3 s slogi za drugi odstavek:

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

In končno ustvarimo razred class4 za zadnji odstavek:

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

S CSS datoteko smo končali. Ostalo je še uporabiti naše CSS sloge, ki smo jih napisali za oznake. Vrnimo se k naši datoteki App.js s komponento.

Prva stvar, ki jo moramo narediti - dodati na začetek datoteke vrstico za uvoz naše datoteke slogov styles.css:

import './styles.css';

Zdaj, da uporabimo v komponenti CSS razrede iz datoteke, uporabimo atribut class. Za prvi odstavek smo imeli razred class2, uporabimo ga:

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

Na podoben način dodajmo razrede za preostale oznake. Kot rezultat dobimo naslednjo kodo:

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

Ustvarite React komponento, ki bo vsebovala div, v divju pa bosta dva gumba. Ustvarite datoteko styles.css s CSS slogi za vaše oznake. Uporabite sloge za oznake komponente.