React တွင် CSS modules များဖြင့် စတိုင်ထည့်ခြင်းကို စတင်လေ့လာခြင်း

ဤသင်ခန်းစာနှင့် နောက်ပိုင်းသင်ခန်းစာများတွင်၊ React ကွန်ပြူနာများကို စတိုင်ထည့်ရန် ခေတ်မီ၍ ထိရောက်သော နည်းလမ်းတစ်ခုကို ထပ်မံသုံးသပ်ပါမည် - ၎င်းမှာ CSS modules များကို အသုံးပြုခြင်း ဖြစ်သည်။

CSS modules ဆိုသည်မှာ ဤနည်းလမ်းတွင် သီးခြားဖြစ်သော ကွန်ပရိုက်လုပ်ထားသည့် CSS ဖိုင်များ ဖြစ်ပြီး ၎င်းတို့အတွင်း အတန်းအမည်များနှင့် အန်နီမေးရှင်းများသည် တည်နေရာအလိုက် နယ်ပယ်အတွင်း၌ ရှိနေသဖြင့် ကွန်ပြူနာအမျိုးမျိုးမှ အတန်းအမည်များ တိုက်ဆိုင်မှုကို ရှောင်ရှားနိုင်ပါသည်။

စတင်ရန် ကျွန်ုပ်တို့၏ ရိုးရှင်းသည့် React အက်ပလီကေးရှင်း buttons ကို ဖန်တီး၍ အလုပ်လုပ်ပါမည်။ ထိုသို့လုပ်ဆောင်ရန် ဗလာဖိုလ်ဒါတစ်ခု test ကို ဖန်တီးပါ၊ ၎င်းအတွင်းသို့ ဝင်ပြီး တာမီနယ်တွင် အောက်ပါ command များကို ရိုက်ထည့်ပါ။

npx create-react-app buttons
cd buttons
npm start

သင့်တွင် React ၏ ဗားရှင်းအသစ်ရှိပါက၊ ဆိုလိုသည်မှာ ၎င်းသည် Create React App v2 နှင့် အထက်ကို ထောက်ပံ့ပါက အပိုဆက်တင်များ ပြုလုပ်စရာမလိုပါ၊ အဘယ့်ကြောင့်ဆိုသော် ဤကိစ္စတွင် CSS modules များသည် အလိုအလျောက် ထောက်ပံ့မည်ဖြစ်သောကြောင့်ဖြစ်သည်။ စစ်ဆေးရန် package.json အတွင်းသို့ ကြည့်ပါ၊ အကယ်၍ မှီခိုမှု react-scripts ၏ ဗားရှင်းသည် 2.x.x နှင့် အထက်ဖြစ်ပါက အားလုံးအဆင်ပြေပါသည်။ မဟုတ်ပါက သင့် React ကို အသစ်ပြုလုပ်ပါ။

CSS modules နည်းလမ်းဖြင့် စတိုင်ထည့်ရန် ကျွန်ုပ်တို့၏ အက်ပလီကေးရှင်းတွင် ခလုတ်သုံးခု ပါဝင်ပါမည်။

CSS ဖိုင်များကို ကျွန်ုပ်တို့ သဘောတူညီချက်အတိုင်း အောက်ပါအတိုင်း အမည်ပေးပါမည်။ [name].module.css.

ယခု src အတွင်းတွင် components ဖိုလ်ဒါကို ဖန်တီးပါ၊ ၎င်းအတွင်းသို့ ကျွန်ုပ်တို့၏ ခလုတ်များအတွက် CSS စတိုင်များပါသည့် Buttons.module.css ဖိုင်ကို ထည့်ပါမည်။

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

ထို့အပြင် components ဖိုလ်ဒါအတွင်းတွင်၊ React ကွန်ပြူနာ Buttons.js ၏ ဗလာဖိုင်ကို ဖန်တီးပါ၊ ဤသို့လုပ်ဆောင်ချိန်တွင် ထုတ်လုပ်ထားသည့် App.js ဖိုင်ကို မကိုင်ပါနှင့်၊ ကျွန်ုပ်တို့ ၎င်းကို နောက်မှ လုပ်ဆောင်ပါမည်။

Buttons.js အတွင်းတွင် CSS စတိုင်များပါသည့် ဖိုင်ကို မဖြစ်မနေ import လုပ်ပါ၊ ထို့အပြင် ဤစတိုင်များကို class attribute ကို အသုံးပြု၍ ခလုတ်တစ်ခုစီတွင် အသုံးပြုပါ။

import styles from "./Buttons.module.css";

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

စကားမစပ်၊ import လုပ်ထားသည့် စတိုင်များပါဝင်သည့် object အတွက် styles ဟူသော စကားလုံးကို မသုံးရန်မလိုပါ၊ သင့်အတွက် သက်တောင့်သက်သာရှိစေမည့် မည်သည့်အမည်ကိုမဆို ပေးနိုင်ပါသည်။

နောက်လာမည့် သင်ခန်းစာတွင် ကျွန်ုပ်တို့၏ အက်ပလီကေးရှင်းကို ပြီးဆုံးအောင်လုပ်ပါမည်။

ဤသင်ခန်းစာပါ သီအိုရီအတိုင်း React အက်ပလီကေးရှင်း inputs ကို ထုတ်လုပ်ပါ။

သင်ခန်းစာတွင် ဖော်ပြထားသည့် CSS modules ချဉ်းကပ်မှုကို အသုံးပြုပါ။ inputs အက်ပလီကေးရှင်း၏ src အတွင်းတွင် React ကွန်ပြူနာ Inputs အတွက် Inputs.js ဖိုင်ကို ဖန်တီးပါ၊ ၎င်းသည် input သုံးခု ပါဝင်ပါမည်။ Inputs.modules.css အတွင်းတွင် input များအတွက် စတိုင်အချို့ကို ရေးပါ။ ဤဖိုင်ကို Inputs.js အတွင်းသို့ import လုပ်ပြီး စတိုင်များကို အသုံးပြုပါ။