Reactda ma'lumotlarni alohida fayldan style atributiga qo'shish

Biz oldingi darsdagidek, komponent faylida uslub obyektlarini yozmasdan, alohida fayl yaratib, uslub obyektlarimizni istalgan komponentga import qilishimiz mumkin.

Shunday qilib, CSS uslublarisiz komponentimizni olamiz:

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

Keling, src papkasida alohida styles.js faylini yarataylik va unda uslub obyektlarimizni yozamiz:

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',
};

styles.js faylining pastki qismida obyektlarimizni styles obyekti sifatida eksport qilishni unutmang:

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Endi styles obyektini komponentimizga import qilamiz:

import { styles } from "./styles";

Endi biz umumiy styles obyektidan kerakli CSS uslublari obyektini teglarimizga qo'llashimiz mumkin. Birinchi abzatga class2 obyektidagi uslublarni qo'llaymiz:

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

Qolgan teglarga ham boshqa obyektlardan uslublarni xuddi shu tarzda qo'shamiz.

Natijada, komponent kodi quyidagicha ko'rinadi:

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

Oldingi darsdagi vazifa uchun yaratgan React komponentingizni oling. styles.js alohida faylini yarating, unda teglaringiz uchun CSS uslublari obyektlari bo'lsin, ularni bitta obyekt sifatida eksport qiling va uslublarni React komponentingizga qo'llang.