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

CSS style များကို element များသို့ style attribute ကိုအသုံးပြု၍လည်း ထည့်သွင်းနိုင်ပါသည်။ ဤသင်ခန်းစာနှင့် နောက်လာမည့် သင်ခန်းစာအချို့တွင် inline styling နည်းလမ်းများကို ဆွေးနွေးသွားမည်။

ယခုတစ်ခါတွင် ဖိုင် styles.css ကို ချိတ်ဆက်မည်မဟုတ်ဘဲ၊ သက်ဆိုင်ရာ တန်ဖိုးများကို style attribute ထဲသို့ tag တစ်ခုစီအတွက် style များပါသည့် object အဖြစ်ပို့ဆောင်မည်။ ထို style များကို component ဖိုင်ထဲတွင် တိုက်ရိုက်ရေးသားမည်။

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

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

ဖိုင် App.js ထဲတွင် return ညွှန်ကြားချက် မတိုင်မီ div အတွက် CSS style များပါသည့် object ကို class1 variable ထဲတွင် ဖန်တီးကြပါစို့။ ဤနေရာတွင် properties အမည်များကို camelCase ပုံစံဖြင့် ရေးသားရမည်၊ ထို့ပြင် properties ၏ တန်ဖိုးများကို ကိုးကားခြင်း အမှတ်အသားထဲသို့ ထည့်ရမည်ကို မှတ်ထားပါ။

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

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

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

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

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

နောက်ဆုံးအနေနှင့် နောက်ဆုံး စာပိုဒ်အတွက် class4။

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

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

App.js<p style={class2}>စာသား</p>

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

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

App.jsfunction App() {
  const 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',
  };

  return (
    <div style={class1}>
      <p style={class2}>စာသား</p>
      <p style={class3}>စာသား</p>
      <p style={class4}>စာသား</p>
    </div>
  );
}