React හි වස්තුවකින් style ගුණාංගයට දත්ත ඇතුළත් කිරීම

CSS මෝස්තර අංගවලට style ගුණාංගය භාවිතයෙන්ද එක් කළ හැක. මෙම සහ ඊළඟ පාඩම් කිහිපයෙන්, අපි inline styling ක්‍රම සලකා බලමු.

දැන් අපි styles.css ගොනුව සම්බන්ධ නොකර, අදාළ අගයන් style ගුණාංගයට එක් එක් ටැග් සඳහා මෝස්තර සහිත වස්තුවක් ලෙස යොමු කරමු, අපි ඒවා සංරචක ගොනුවේම සෘජුව ලියනු ඇත.

ඉතින්, අපි පෙර පාඩමේදී සාදන ලද, CSS මෝස්තර නොමැති අපේ සංරචකය ගනිමු:

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

දැන් අපි App.js ගොනුවේ return විධානයට පෙර div එක සඳහා 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 ගුණාංගවල යොදන්න.