React တွင် CSS ဖြင့် အပြင်အဆင်ပြုလုပ်ရာတွင် Global CSS ကို အသုံးပြုခြင်း

ကျွန်ုပ်တို့တွင် React component App ရှိသည်ဟု ယူဆပါစို့၊ ၎င်းတွင် div တစ်ခုရှိပြီး ထို div အတွင်း၌ စာပိုဒ် သုံးပိုဒ်ရှိသည်။

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

ဤ component ကို အပြင်အဆင်ပြုလုပ်ကြပါစို့။ ဤသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့၏ component ရှိသည့် ဖိုဒါ src အတွင်း၌ ကျွန်ုပ်တို့၏ tag များအတွက် CSS style များပါသည့် သာမန် CSS ဖိုင် styles.css ကို ဖန်တီးပါမည်။

ဤဖိုင်ထဲတွင် div အတွက် class class1 ကို အောက်ပါ style များဖြင့် ဖန်တီးပါမည်။

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

ယခု ပထမဆုံး စာပိုဒ်အတွက် style များပါသည့် class class2 ကို ထည့်သွင်းပါမည်။

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

ဒုတိယ စာပိုဒ်အတွက် style များပါသည့် class class3 ကို ထည့်သွင်းပါမည်။

styles.css.class3 {
  font-style: italic;
  color: brown;
}

နောက်ဆုံးအနေဖြင့် နောက်ဆုံး စာပိုဒ်အတွက် class class4 ကို ဖန်တီးပါမည်။

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

CSS ဖိုင်နှင့် ပတ်သက်၍ ကျွန်ုပ်တို့ ပြီးဆုံးသွားပါပြီ။ ကျွန်ုပ်တို့ ရေးသားခဲ့သည့် CSS style များကို tag များတွင် အသုံးပြုရန် ကျန်ရှိနေပါသေးသည်။ ကျွန်ုပ်တို့၏ component ဖိုင် App.js သို့ ပြန်သွားကြပါစို့။

ကျွန်ုပ်တို့ ပထမဆုံးလုပ်ရမည့်အရာသည် ကျွန်ုပ်တို့၏ style ဖိုင် styles.css ကို import လုပ်ရန် ဖိုင်၏အစတွင် စာကြောင်းတစ်ကြောင်း ထည့်သွင်းရန်ဖြစ်သည်။

App.jsimport './styles.css';

ယခု component ထဲတွင် ဖိုင်မှ CSS class များကို အသုံးပြုရန် class attribute ကို အသုံးပြုပါမည်။ ပထမဆုံး စာပိုဒ်အတွက် class class2 ရှိခဲ့သည်၊ ၎င်းကို အသုံးပြုပါမည်။

App.js<p class="class2">text</p>

အလားတူပင် ကျန်ရှိသော tag များအတွက် class များကို ထည့်သွင်းပါမည်။ ရလဒ်အနေဖြင့် အောက်ပါကုဒ်ကို ရရှိမည်ဖြစ်သည်။

App.js<div class="class1">
  <p class="class2">text</p>
  <p class="class3">text</p>
  <p class="class4">text</p>
</div>