Коркарди CSS дар атрибути style дар React

Дар дарсҳои гузашта ба атрибут style мо тағирёбандаеро мегузаронидем, ки объект бо CSS услубҳоро дар бар мегирифт. Мумкин аст ки тағирёбандаи миёнавӣ истифода нашавад, балки объект рост дар атрибут навишта шавад - дар ин ҳолат ба ду ҷуфт кашаҳои чиндорӣ ниёз дорем - якум аз гузориши JSX, ва дуввум - аз объект.

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

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

Барои намуна, бевосита хусусиятҳои CSS-ро барои абзаци якуми компоненти React-и мо App менависем:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	матн
</p>

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

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

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				матн
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				матн
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				матн
			</p>
		</div>
	);
}

Компоненти React-еро, ки шумо дар вазифаи дарси гузашта сохта будед, бигиред. Барои ҳар як тег услубҳоро рост дар атрибут style илова кунед, тавре ки дар ин дарс нишон дода шуд.