React တွင် သီးခြားဖိုင်မှ style attribute ထဲသို့ ဒေတာများ ထည့်သွင်းခြင်း

ယခင်သင်ခန်းစာမှာလို component ဖိုင်ထဲတွင် style object များကို မရေးတော့ဘဲ၊ ကျွန်ုပ်တို့၏ style object များပါဝင်သော သီးခြားဖိုင်တစ်ခု ဖန်တီးကာ လိုအပ်သော component ထဲသို့ import လုပ်နိုင်ပါသည်။

ထို့ကြောင့် CSS style မပါသော ကျွန်ုပ်တို့၏ component ကို ယူကြည့်ပါမည်။

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

src ဖိုဒါထဲတွင် သီးခြားဖိုင် styles.js တစ်ခု ဖန်တီးပြီး ကျွန်ုပ်တို့၏ style object များကို ရေးကြည့်ပါမည်။

styles.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center',
};

const class2 = {
  color: 'orangered',
  fontWeight: 'bold',
};

const class3 = {
  fontStyle: 'italic',
  color: 'brown',
};

const class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
};

styles.js ဖိုင်အောက်ခြေတွင် ကျွန်ုပ်တို့၏ object များကို styles ဆိုသော object တစ်ခုတည်းအဖြစ် export လုပ်ရန် မမေ့ပါနှင့်။

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

ယခု styles object ကို ကျွန်ုပ်တို့၏ component ထဲသို့ import လုပ်ပါမည်။

App.jsimport { styles } from "./styles";

ယခု ကျွန်ုပ်တို့သည် အထွေထွေ styles object မှ လိုအပ်သော CSS style object ကို ကျွန်ုပ်တို့၏ tag များထံ သုံးနိုင်ပါပြီ။ ပထမစာပိုဒ်အတွက် class2 object မှ style များကို သုံးကြည့်ပါမည်။

App.js<p style={styles.class2}>text</p>

အလားတူပင် ကျန်ရှိသော tag များအတွက် object များမှ style များကို ထည့်သွင်းပါမည်။

ရလဒ်အနေဖြင့် component ၏ code သည် အောက်ပါအတိုင်း ပုံစံဖြစ်လာမည်။

App.jsfunction App() {
  return (
    <div style={styles.class1}>
      <p style={styles.class2}>text</p>
      <p style={styles.class3}>text</p>
      <p style={styles.class4}>text</p>
    </div>
  );
}