React တွင် သီးခြားဖိုင်မှ style attribute ထဲသို့ ဒေတာများ ထည့်သွင်းခြင်း

ယခင်သင်ခန်းစာမှာလို component ဖိုင်ထဲတွင် style object များကို မရေးတော့ဘဲ၊ ကျွန်ုပ်တို့၏ style object များပါဝင်သော သီးခြားဖိုင်တစ်ခု ဖန်တီးကာ လိုအပ်သော component ထဲသို့ import လုပ်နိုင်ပါသည်။

ထို့ကြောင့် CSS style မပါသော ကျွန်ုပ်တို့၏ component ကို ယူကြည့်ပါမည်။

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

src ဖိုဒါထဲတွင် သီးခြားဖိုင် styles.js တစ်ခု ဖန်တီးပြီး ကျွန်ုပ်တို့၏ style object များကို ရေးကြည့်ပါမည်။

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 ဖိုင်အောက်ခြေတွင် ကျွန်ုပ်တို့၏ object များကို styles ဆိုသော object တစ်ခုတည်းအဖြစ် export လုပ်ရန် မမေ့ပါနှင့်။

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

ယခု styles object ကို ကျွန်ုပ်တို့၏ component ထဲသို့ import လုပ်ပါမည်။

import { styles } from "./styles";

ယခု ကျွန်ုပ်တို့သည် အထွေထွေ styles object မှ လိုအပ်သော CSS style object ကို ကျွန်ုပ်တို့၏ tag များထံ သုံးနိုင်ပါပြီ။ ပထမစာပိုဒ်အတွက် class2 object မှ style များကို သုံးကြည့်ပါမည်။

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

အလားတူပင် ကျန်ရှိသော tag များအတွက် object များမှ style များကို ထည့်သွင်းပါမည်။

ရလဒ်အနေဖြင့် component ၏ code သည် အောက်ပါအတိုင်း ပုံစံဖြစ်လာမည်။

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 component ကို ယူပါ။ သီးခြားဖိုင် styles.js တစ်ခုကို ဖန်တီးပါ၊ ထိုဖိုင်ထဲတွင် သင်၏ tag များအတွက် CSS style object များ ပါဝင်ပါစေ၊ ၎င်းတို့ကို object တစ်ခုတည်းအဖြစ် export လုပ်ပါ၊ ပြီးနောက် သင်၏ React component ထံ style များကို သုံးပါ။