React တွင် Component များကို အဆင့်မြင့် Style ချယ်မှုပြုခြင်း

ကျွန်ုပ်တို့တွင် React Component Block ရှိသည်ဟု ယူဆပါစို့ ပြီးတော့ Styled Components ဖြင့် Style ချယ်ထားသော Button နှင့် Container Component များကို ၎င်းအတွင်း ဖန်တီးထားပါသည်။

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Button = styled.input`
	background-color: orange;
	font-size: 18px;
	margin: 5px;
`;

ယခု စဉ်းစားကြည့်ပါ၊ ကျွန်ုပ်တို့ဟာ နောက်ထပ် Button Component တစ်ခု လိုအပ်နေပြီး သို့သော် ၎င်းတွင် စာသားအဖြူရောင် နှင့် နောက်ခံအစိမ်းရောင် ရှိရပါမည်။

ဤအတွက် ကျွန်ုပ်တို့ရဲ့ Button Component အခြေခံပေါ်တွင် MdButton အမည်ရှိ Component အသစ်တစ်ခု ဖန်တီးပြီး ပြောင်းလဲလိုသော ဂုဏ်သတ္တိများကိုသာ ထည့်သွင်းရေးဆွဲရန်လိုအပ်ပါသည်။

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

Block အတွင်းတွင် ကျွန်ုပ်တို့၏ Style ချယ်ထားသော Component အားလုံးကို နေရာချပါမည်။

function Block() {
	return (
		<Container>
			<Button>btn0</Button>
			<MdButton>btn1</MdButton>
		</Container>
	);
}

ဗလာ React Component Block1 ကိုဖန်တီးပါ။ Styled Components ကိုအသုံးပြု၍ အကျယ် အမြင့် 150px၊ နောက်ခံအဝါရောင်၊ နှင့် အနားသတ်အကျယ် 2px ရှိသော Style ချယ်ထားသည့် div တစ်ခုကို ၎င်းအတွင်းတွင် ဖန်တီးပါ။ ၎င်းကို DIVA ဟုခေါ်ပါ။

ယခင် တာဝန်မှ div အခြေခံ၍ DIVB အမည်ရှိ အတူတူပင်ဖြစ်သော div တစ်ခုကို ဖန်တီးပါ၊ သို့သော် နောက်ခံအစိမ်းရောင် နှင့် အနားသတ်အကျယ် 3px ရှိရပါမည်။

Block1 အတွင်းContainer div တစ်ခုကိုဖန်တီးပါ။ ယခင်သင်ခန်းစာ အတွက် သင်ဖန်တီးခဲ့သော DIVA Component နှစ်ခုနှင့် ၎င်းတို့၏ကြားတွင် DIVB Component တစ်ခုကို အတွင်းတွင် နေရာချပါ။