Дар React аз объект ба атрибути style додани маълумот

Ба унсуриҳо стилҳои CSS-ро инчунин метавон тавассути атрибути style илова кард. Дар ин ва чанд дарси дигар мо усулҳои стилизатсияи сатрӣ-ро меомӯзем.

Акнун мо файли styles.css-ро пайваст намекунем, балки арзишҳои мувофиқро ба атрибути style дар шакли объект бо стилҳо барои ҳар як тег мефиристем, ки мо онҳоро рост дар файли компонент менависем.

Пас, бигиред компоненти худро бе стилҳои CSS, ки мо дар дарси гузашта карда будем:

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

Биёед дар файли App.js пеш аз фармони return объект бо стилҳои CSS барои див дар тағирёбандаи class1 созем. Дар хотир доред, ки номҳои хусусиятҳо дар ин ҷо бо camelCase навиштанӣ навишта мешаванд, ва арзишҳои хусусиятҳоро бояд дар қошиҳо гирифт:

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

Акнун объекти class2-ро бо стилҳо барои абзаци аввал илова кунем:

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

Объекти class3 бо стилҳо барои абзаци дуюм:

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

Ва, ниҳоят class4 барои охирин:

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

Акнун, барои дар компонент татбиқ кардани синфҳои CSS, аз атрибут style истифода мебарем. Барои абзаци аввал мо тағирёбандаи class2-ро дорем, онро ҳамчун арзиш мефиристем:

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

Ба тавре монанд стилҳо аз объектҳо барои тегҳои боқимонда илова мекунем.

Дар натиҷа, рамзи компонент ба шукли зерин хоҳад буд:

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>
	);
}

React компонентеро, ки шумо дар вазифаи дарси гузашта сохта будед, бигиред, объектҳо бо стилҳои CSS барои тегҳои худ созед, онҳоро дар атрибутҳои мувофиқи style гузоред.