CSS modules React ဖြင့် စတိုင်ချယ်ရှင်ကို ဆက်လက်လေ့လာခြင်း

ကျွန်ုပ်တို့၏ application <buttons> ကို ဆက်လက်လုပ်ဆောင်ပါမည်။ ယခု အဓိက component <App> ကို လုပ်ဆောင်ပါမည်။ <src> ဖိုလ်ဒါထဲတွင် အစကတည်းက generate လုပ်ထားပြီးဖြစ်သည်။ ၎င်းတွင် div နှစ်ခု၊ ခေါင်းစဉ်တစ်ခုနှင့် ခလုတ်တစ်ခု ရှိပါမည်။

ဖိုင်အမည် <App.css> ကို <App.module.css> အဖြစ် သဘောတူညီချက်အတိုင်း ပြောင်းလဲပါ၊ ၎င်းကို ရှင်းလင်းကာ ၎င်းထဲတွင် tag များအတွက် CSS style များပါသော အတန်းအမျိုးအစားများစွာကို ဖန်တီးပါမည်။

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

ယခု ဖိုင် <App.js> ၏ အကြောင်းအရာကို ရှင်းလင်းပါမည်။ ထို့နောက် React component <Buttons> နှင့် <App.module.css> မှ style များကို import လုပ်ပါ။ ကျွန်ုပ်တို့၏ tag များကို ရေးပြီး ၎င်းတို့အတွက် style များကို အသုံးချကာ React component <Buttons> ကို နေရာချထားပါမည်။

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

ကျွန်ုပ်တို့သည် <App.module.css> မှ import လုပ်သည့် style များပါဝင်သော object ၏ အမည်အတွက် <classes> ဟူသော စကားလုံးကို အသုံးပြုခဲ့သည်။ ယခင်ကိစ္စကဲ့သို့ပင်၊ ဤ object ကို သင့်အတွက်အဆင်ပြေသလို နာမည်ပေးနိုင်ပါသည်။

နောက်ကျန်သည်မှာ အသေးစား အဆင့်အနည်းငယ်သာဖြစ်သည်။ ဖိုင် <index.css> ၏အမည်ကို သဘောတူညီချက်အရ <index.module.css> အဖြစ် ပြောင်းလဲပါ။ ထို့အပြင် ဖိုင် <index.js> တွင် import စာကြောင်းကို မမေ့မလျော့ ပြောင်းလဲရန် လိုအပ်ပါသည်။

import "./index.css";

ဤစာကြောင်းသို့ ပြောင်းလဲရန်။

import "./index.module.css";

ယခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ application လုပ်ဆောင်ချက်၏ ရလဒ်ကို browser ထဲတွင် မြင်တွေ့နိုင်ပါသည်။

သင် browser ထဲရှိ developer panel တွင် generate လုပ်ထားသော markup ကို ဖွင့်ကြည့်ပါက၊ component တစ်ခုစီတွင် ၎င်း၏ကိုယ်ပိုင် ထူးခြားသော class များ generate လုပ်ထားသည်ကို သင်တွေ့မြင်ရပါမည်။ ဤနည်းအားဖြင့် တစ်ခုချင်းစီသော component များ၏ class များကြား ပဋိပက္ခဖြစ်နိုင်ခြေကို စိုးရိမ်စရာမလိုတော့ပါ။

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

သင်ခန်းစာမှ သီအိုရီအတိုင်း၊ သင်၏ application <inputs> ၏ React component <App> ကို ရှင်းလင်းပါ။ ယခင်သင်ခန်းစာများတွင် သင်ဖန်တီးခဲ့သော တာဝန်များဖြစ်သည်။ ထို့အပြင် ၎င်းအတွင်း၊ သင်၏ဖန်တီးထားသော <Inputs> ကို style ချယ်ထားသော div တစ်ခုခုတွင် နေရာချထားပါ။ <App> ထဲသို့ style ချယ်ထားသော ခေါင်းစဉ်တစ်ခု ထည့်ပါ။ ဤအရာအားလုံးကို နောက်ထပ် div တစ်ခုခုထဲသို့ ထည့်သွင်းပါ။ React component <App> ၏ tag များအတွက် style များကို <App.modules.css> တွင် ရေးသားပါ။

အားလုံးကို အတူတကွ စုစည်းပါ၊ ကျန်ရှိသော ဖိုင်များကို မှန်ကန်စွာ ချိတ်ဆက်ပြီး သင်၏ application <inputs> ကို စတင်လုပ်ဆောင်ပါ။