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

පෙර පාඩමේ මෙන් සංරචක ගොනුවේ විලාස වස්තූන් ලිවීම වෙනුවට, අපට අපගේ විලාස වස්තූන් සමඟ වෙනම ගොනුවක් සෑදිය හැකි අතර ඒවා අවශ්‍ය සංරචකයට ආයාත කර ගත හැකිය.

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

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</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}>text</p>

ඒ හා සමානව ඉතිරි ටැගවලට වෙනත් වස්තු වලින් විලාසයන් එකතු කරමු.

එහි ප්‍රතිඵලයක් ලෙස, සංරචකයේ කේතය පහත පරිදි පෙනෙනු ඇත:

function App() {
	return (
		<div style={styles.class1}>
			<p style={styles.class2}>text</p>
			<p style={styles.class3}>text</p>
			<p style={styles.class4}>text</p>
		</div>
	);
}

පෙර පාඩමේ කාර්යය සඳහා ඔබ සෑදූ React සංරචකය ගන්න. වෙනම ගොනුවක් styles.js සාදන්න, එහි ඔබගේ ටැග සඳහා CSS විලාස වස්තූන් ඇතුළත් කරන්න, ඒවා එක් වස්තුවක් ලෙස අපනයනය කරන්න, ඔබගේ React සංරචකයට විලාසයන් යොදන්න.