React တွင် Styled Components ဖြင့် စတိုင်သတ်မှတ်ခြင်း

အရင် သင်ခန်းစာများတွင် Global CSS နှင့် inline styling တို့ကို အသုံးပြုသည့် စတိုင်သတ်မှတ်နည်းလမ်းများကို လေ့လာခဲ့ပြီးဖြစ်ပါသည်။ ဤသင်ခန်းစာတွင် ကြီးမားသော application များအတွက် ပို၍ ထိရောက်သည့် နည်းလမ်းဖြစ်သော styled-components စာကြည့်တိုက်ကို အသုံးပြုခြင်းနှင့် လုပ်ဆောင်သွားပါမည်။

ထို့ကြောင့် အရင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့ အသုံးပြုခဲ့သော CSS စတိုင် မရှိသည့် component ကို ယူလိုက်ပါမည်။

App.jsfunction App() {
  return (
    <div>
      <p>စာသား</p>
      <p>စာသား</p>
      <p>စာသား</p>
    </div>
  );
}

ပထမဆုံး Styled Components စာကြည့်တိုက်ကို ထည့်သွင်းပါမည်။

terminalnpm install --save styled-components

ထို့နောက် App component ထဲသို့ လိုအပ်သော package ကို import လုပ်ပါမည်။

App.jsimport styled from 'styled-components';

ယခု ကျွန်ုပ်တို့သည် tag များကို စတိုင်များဖြင့် ထည့်သွင်းပတ်ရံကာ ၎င်းတို့ကို React component များအဖြစ် အသုံးပြုနိုင်ပြီဖြစ်သော်လည်း JS အတွင်း တိုက်ရိုက်ချိတ်ဆက်ထားသည့် စတိုင်များပါရှိပါသည်။ ထိုသို့သော နည်းလမ်းကို CSS in JS ဟုလည်း ခေါ်ပါသည်။

ပထမ စာပိုဒ်ကို စတိုင်သတ်မှတ်ကြည့်ရအောင်။ ဤအတွက် App လုပ်ဆောင်ချက်မတိုင်မီ import လုပ်ထားသည့် စာကြောင်းများနောက်မှ Text1 component ကို ဖန်တီးပါမည်။ စာကြည့်တိုက်မှ styled object အတွင်း စာပိုဒ်တစ်ပိုဒ် လိုအပ်သောကြောင့် styled.p ဟုရေးသားပါမည်။ ထို့နောက် template string အတွင်း လိုအပ်သော CSS စတိုင်များကို သာမန် CSS တွင်ကဲ့သို့ ရေးသားပါမည်။

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

မြင်တွေ့ရသည့်အတိုင်း ဤနေရာတွင် template string ပုံစံဖြင့် ရှင်းလင်းသော CSS ကို အသုံးပြုထားပြီး ၎င်းသည် အလွန် အဆင်ပြေပါသည်။ အလားတူပင် ကျွန်ုပ်တို့သည် media query များ၊ pseudo-element များ၊ selector များနှင့် CSS ၏ အခြားလုပ်ဆောင်ချက်များကို အသုံးပြုနိုင်ပါသည်။

ယခု App component လုပ်ဆောင်ချက်အတွင်း p tag ကို ကျွန်ုပ်တို့ဖန်တီးထားသော CSS စတိုင်များပါသည့် Text1 component နှင့် အစားထိုးပါမည်။

App.js<Text1>စာသား</Text1>     

အလားတူပင် ဒုတိယနှင့် တတိယ စာပိုဒ်များကို စတိုင်သတ်မှတ်ပါမည်။ ဤအတွက် Text2 နှင့် Text3 component များကို ဖန်တီးပါမည်။

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

နောက်ဆုံးတွင် ကျွန်ုပ်တို့၏ div ကို စတိုင်သတ်မှတ်ပါမည်။ ဤအတွက် component ကို ဖန်တီးပြီး ၎င်းကို Container ဟုခေါ်ပါမည်။

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

ကျွန်ုပ်တို့၏ tag အားလုံးကို ဖန်တီးထားသော component များနှင့် အစားထိုးပါမည်။

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>စာသား</Text1>
      <Text2>စာသား</Text2>
      <Text3>စာသား</Text3>
    </Container>
  );
}

ထိုသို့သော နည်းလမ်းဖြင့် စတိုင်များပါသော အကြိမ်ကြိမ် အသုံးပြုနိုင်သည့် component များကို ဖန်တီးနိုင်ပါသည်။

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

အလားတူပင် ဥပမာ Emotion စာကြည့်တိုက်ကို အသုံးပြုခြင်းဖြင့် component များကို စတိုင်သတ်မှတ်နိုင်ပါသည်။