Маълумотларни Reactда алохида файлдан style атрибутига қўйиш

Биз ўтган дарсдаги каби компонент файлида стил объектларини ёзмаймиз, балки стил объектларимиз билан алохида файл яратиб, уларни керакли компонентга импорт қиламиз.

Шунинг учун, CSS стилларисз компонентимизни оламиз:

function App() {
	return (
		<div>
			<p>матн</p>
			<p>матн</p>
			<p>матн</p>
		</div>
	);
}

src папкасида алохида styles.js файлини яратамиз, унда бизнинг стил объектларимиз ёзилади:

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 файлининг охида бизнинг объектларимизни битта объект styles сифатида экспорт қилишни унутмаймиз:

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

Энди styles объектини бизнинг компонентга импорт қиламиз:

import { styles } from "./styles";

Энди биз умумий styles объектидан керакли CSS стиллар объектини тегларимизга қўллаш имконига эгамиз. Биринчи абзацга class2 объектидан стилларни қўллаймиз:

<p style={styles.class2}>матн</p>

Ҳудди шу тарзда қолган тегларга объектлардан стиллар қўшамиз.

Натижада, компонент коди куйидагича кўринади:

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

Сиз ўтган дарс учун вазифада қилган React компонентингизни олинг. Алохида styles.js файлини яратинг, унда сизнинг тегларингиз учун CSS стил объектлари бўлсин, уларни битта объект сифатида экспорт қилинг, стилларни React компонентингизга қўлланг.