Inline Styling

အရင်ဆုံး ကျတော်တို့ inline styling ကို လေ့လာလိုက်ကြရအောင်

အရင်ဆုံး ကျတော်တို့ component တခုကို ဖန်တီးလိုက်ပါမယ်

function Styling (){
    return(
        <div>Styling</div>
    )
}
export default Styling

ပြီရင်တော့ ကျတော်တို့က style ဆိုတဲ့ props လေး ရေးလိုက်ပါမယ်

ဒီအချိန်မှာ ကျတော်တို့ သတိထားရမှာက html css လိုမျိုး string type နဲ့ရေးလို့ မရတာကိုပါပဲ

သူ့မှာက object type ပုံစံနဲ့ရေးပေးရမှာပါ

// rest of code 
<h1 style={{margin: "auto", backgroundColor: "#007bff" , color: "#fff"}}>Inline Styling</h1>
// rest of code

ဒီလိုလေး ရေးပေးရမှာပါ

ကျတော်တို့ html css တွေမှာရှိတဲ့ dash ( - ) တွေအစား camelCase နဲ့ရေးပေးရပါမယ်

ဥပမာ - background-color >> backgroungColor အဲလိုလေး ပြောင်းရေးပေးရပါမယ်

ဒီလောက်ဆိုရင်တော့ ကျတော်တို့ inline stylingကို ရေးတတ်သွားမယ်လို့မြင်ပါတယ်

Last updated