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

CSS стилларни elementларга style атрибути орқали ҳам қўшиш мумкин. Ушбу ва keyingi bir nechta darslarda biz инлайн стиллар usullarini ko'rib chiqamiz.

Ҳозирча биз styles.css файлини уланмаймиз, balki mos қийматларни har bir teg uchun стиллар bilan объект коринишида style атрибутига ўтказамиз, уларни component файлининг ўзида ёзамиз.

Шунинг учун, CSS стилларисз ўтган дарсда биз ясаган componentимизни оламиз:

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

App.js файлида return buyругида див учун 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',
}

Ва ниҳоят, oxirgisi учун class4:

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

Энди, component ичида CSS классларни қўллаш учун, style атрибутидан фойдаланамиз. Биринчи абзац учун бизда class2 ўзгарувчиси бор эди, уни қиймат сифатида ўтказамиз:

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

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

Натижада, component коди quyidagicha ko'rinadi:

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 componentингизни олинг, тегларингиз учун CSS стиллари билан объектлар яритинг, уларни мос style атрибутларига жойланг.