Ma'lumotlarni Reactda ob'ektdan style atributiga qo'shish

CSS uslublarini elementlarga style atributi orqali ham qo'shish mumkin. Ushbu va keyingi bir nechta darslarda biz inline uslublash usullarini ko'rib chiqamiz.

Endi biz styles.css faylini ulamaymiz, balki mos keladigan qiymatlarni har bir tegga uslublar ob'ekti ko'rinishida style atributiga o'tkazamiz, ularni komponent faylida bevosita yozamiz.

Shunday qilib, oldingi darsda qilgan CSS uslublarisiz komponentimizni olaylik:

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

Keling, App.js faylida return buyrug'idan oldin div uchun CSS uslublari bilan class1 o'zgaruvchisida ob'ekt yarataylik. Esingizda bo'lsin, bu erda xususiyat nomlari camelCase notatsiyasida yoziladi va xususiyat qiymatlari tirnoq ichiga olinadi:

const class1 = {
	width: '200px',
	border: '2px solid brown',
	padding: '10px',
	textAlign: 'center'
};

Endi birinchi abzat uchun uslublar bilan class2 ob'ektini qo'shamiz:

const class2 = {
	color: 'orangered',
	fontWeight: 'bold'
}

Ikkinchi abzat uchun uslublar bilan class3 ob'ekti:

const class3 = {
	fontStyle: 'italic',
	color: 'brown',
}

Va nihoyat oxirgisi uchun class4:

const class4 = {
	backgroundColor: 'orange',
	fontWeight: 'bold',
	color: 'white',
}

Endi komponentda CSS klasslarini qo'llash uchun style atributidan foydalanamiz. Birinchi abzat uchun bizda class2 o'zgaruvchisi bor edi, uni qiymat sifatida o'tkazamiz:

<p style={class2}>text</p>

Shu tarzda qolgan teglar uchun ob'ektlardan uslublarni qo'shamiz.

Natijada, komponent kodi quyidagicha ko'rinadi:

function App() {
	const class1 = {
		width: '200px',
		border: '2px solid brown',
		padding: '10px',
		textAlign: 'center',
	};

	const class2 = {
		color: 'orangered',
		fontWeight: 'bold',
	};

	const class3 = {
		fontStyle: 'italic',
		color: 'brown',
	};

	const class4 = {
		backgroundColor: 'orange',
		fontWeight: 'bold',
		color: 'white',
	};

	return (
		<div style={class1}>
			<p style={class2}>text</p>
			<p style={class3}>text</p>
			<p style={class4}>text</p>
		</div>
	);
}

Oldingi darsdagi vazifa uchun qilgan React komponentingizni oling, teglaringiz uchun CSS uslublari bilan ob'ektlar yarating, ularni mos keladigan style atributlariga joylashtiring.