Reactda stil berishda global CSSdan foydalanish

Faraz qilaylik, bizda React komponenti App mavjud bo'lib, uning ichida div, divning ichida esa uchta abzats bor:

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

Keling, ushbu komponentga stil beraylik. Buning uchun, bizning komponentimiz joylashgan src papkasida oddiy CSS faylini styles.css yaratamiz bizning teglarimiz uchun.

Ushbu faylda div uchun class1 klassini yaratamiz:

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

Endi birinchi abzats uchun class2 klassini qo'shamiz:

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

class3 klassi ikkinchi abzats uchun:

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

Va nihoyat, oxirgi abzats uchun class4 klassini yaratamiz:

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

Biz CSS fayli bilan ishimizni tugatdik. Qolgan narsa yozgan CSS stillarimizni teglarga qo'llash. Keling, komponentimiz joylashgan App.js fayliga qaytaylik.

Birinchi navbatda qilishimiz kerak bo'lgan narsa - fayl boshiga bizning stil faylimiz styles.css ni import qilish satrini qo'shish:

import './styles.css';

Endi, komponentda fayldan CSS klasslarini qo'llash uchun, class atributidan foydalanamiz. Birinchi abzats uchun bizda class2 klassi bor edi, uni qo'llaymiz:

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

Xuddi shu tarzda qolgan teglar uchun klasslarni qo'shamiz. Natijada quyidagi kodni olamiz:

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

React komponentini yarating, unda div bo'lsin, divning ichida esa ikkita tugma bo'lsin. styles.css faylini yarating teglaringiz uchun CSS stillari bilan. Komponent teglariga yozilgan stillarni qo'llang.