Globaalse CSS-i kasutamine React-i stiilimisel

Oletame, et meil on React-i komponent App, milles on div, ja selle div-i sees on kolm lõigu:

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

Stiilime selle komponendi. Selleks loome samas kaustas src meie komponendiga tavalise CSS-faili stiilidega styles.css meie siltide jaoks.

Selles failis loome div-ile klassi class1 stiilidega:

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

Nüüd lisame klassi class2 koos stiilidega esimese lõigu jaoks:

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

Klassi class3 koos stiilidega teise lõigu jaoks:

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

Ja lõpuks loome klassi class4 viimase lõigu jaoks:

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

CSS-failiga on meil valmis. Jääb üle rakendada meie CSS-stiilid, mille me siltide jaoks kirjutasime. Pöördume tagasi meie faili App.js komponendiga.

Esimene asi, mida me peame tingimata tegema - lisada faili algusesse meie stiilifaili styles.css importimise rida:

import './styles.css';

Nüüd, et rakendada komponendis CSS-klasse failist, kasutame atribuuti class. Esimese lõigu jaoks oli meil klass class2, rakendame seda:

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

Samamoodi lisame klassid ülejäänud siltidele. Tulemuseks saame järgmise koodi:

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

Looge React-i komponent, mis sisaldab div-i, ja div-is on kaks nuppu. Looge fail styles.css CSS-stiilidega teie siltide jaoks. Rakendage komponendi siltidele kirjutatud stiile.