React-da stil vermada qlobal CSS-in istifadesi

Tutaq ki, bizim React komponentimiz App var, icinde div var, div-in icinde ise uc abzas var:

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

Gelin bu komponenti stilize edek. Bunun ucun, komponentimizin oldugu src qovlugunda adi CSS fayli yaradaq styles.css teqlerimiz ucun.

Bu faylda div ucun class1 sinfi yaradaq:

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

Indi birinci abzas ucun class2 sinfi elave edek:

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

Ikinci abzas ucun class3 sinfi:

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

Ve son olaraq sonuncu abzas ucun class4 sinfi yaradaq:

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

CSS fayli ile isimiz bitdi. Qaldi yazdigimiz CSS stillerini teqlere tetbiq etmek. Komponentimizin oldugu App.js fayline qayidaq.

Ilk etmeli etmeliyimiz sey - faylin evveline styl faylimizin import setrini elave etmekdir styles.css:

import './styles.css';

Indi komponentde CSS siniflerini tetbiq etmek ucun class atributundan istifade edek. Birinci abzas ucun class2 sinfi var idi, onu tetbiq edek:

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

Eyni usulla qalan teqlere de sinifleri elave edek. Netice olaraq asagidaki kodu alariq:

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

React komponenti yaradin, icinde div olsun, div-in icinde ise iki duyme olsun. styles.css fayli yaradin ve teqleriniz ucun CSS stilleri yazin. Yazdiginiz stilleri komponentin teqlerine tetbiq edin.