Дар 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";

Акнун мо метавонем объекти даркори бо CSS-услубҳоро аз объекти умумӣ styles ба тегҳои мо татбиқ кунем. Ба абзаци аввал услубҳоро аз объекти 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 компоненти худ татбиқ кунед.