CSS ကို အသုံးပြု၍ တုံ့ပြန်မှုပုံစံပြုလုပ်ခြင်း။
CSS ဖြင့် တုံ့ပြန်ပုံကို ပုံစံဖော်ရန် နည်းလမ်းများစွာရှိသည်၊ ဤသင်ခန်းစာတွင် ဘုံနည်းလမ်းသုံးခုကို အနီးကပ်လေ့လာပါမည်။
- လိုင်းပုံစံပုံစံ
- CSS ပုံစံစာရွက်များ
- CSS Modules
Inline Styling
ဒြပ်စင်တစ်ခုအား inline style attribute ဖြင့် ပုံစံဆင်ရန်၊ တန်ဖိုးသည် JavaScript object ဖြစ်ရမည်-
ဥပမာ-
ပုံသဏ္ဍာန်အချက်အလက်နှင့်အတူ အရာဝတ္ထုတစ်ခုကို ထည့်သွင်းပါ-
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
မှတ်ချက်- JSX တွင်၊ JavaScript ၏အသုံးအနှုန်းများကို curly braces များအတွင်းတွင်ရေးထားပြီး JavaScript အရာဝတ္ထုများသည် curly braces များကိုအသုံးပြုသောကြောင့်၊ အထက်နမူနာရှိပုံစံကို curly braces နှစ်စုံအတွင်းတွင် ရေးသားထားသည် {{}}။
camelCased အိမ်ခြံမြေအမည်များ
inline CSS ကို JavaScript object တစ်ခုတွင် ရေးထားသောကြောင့်၊ ကဲ့သို့သော တုံးတို ပိုင်းခြားထားသော ဂုဏ်သတ္တိများကို background-colorcamel case syntax ဖြင့် ရေးသားရပါမည်-
ဥပမာ-
အ စားသုံး backgroundColorပါ
background-color
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript Object
ပုံစံဒီဇိုင်းအချက်အလက်ပါသည့် အရာဝတ္ထုတစ်ခုကိုလည်း ဖန်တီးနိုင်ပြီး စတိုင်လ်ရည်ညွှန်းချက်ဖြင့် ၎င်းကို ကိုးကားနိုင်သည်-
ဥပမာ-
အမည်ရှိ စတိုင်အရာဝတ္ထုတစ်ခုကို ဖန်တီးပါ myStyle-
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
CSS ပုံစံစာရွက်
သင်သည် သင်၏ CSS ပုံစံကို သီးခြားဖိုင်တစ်ခုတွင် ရေးနိုင်သည်၊
.cssဖိုင်ကို ဖိုင်တိုးချဲ့မှုဖြင့် သိမ်းဆည်းကာ ၎င်းကို သင်၏ အပလီကေးရှင်းတွင် ထည့်သွင်းနိုင်သည်။
App.css-
"App.css" ဟုခေါ်သော ဖိုင်အသစ်တစ်ခုဖန်တီးပြီး ၎င်းတွင် CSS ကုဒ်အချို့ကို ထည့်သွင်းပါ-
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
မှတ်ချက်- သင်သည် ဖိုင်ကို ကြိုက်သလို ခေါ်နိုင်သည်၊ မှန်ကန်သော ဖိုင် extension ကို မှတ်ထားရုံသာ။
သင့်လျှောက်လွှာတွင် ပုံစံစာရွက်ကို တင်သွင်းပါ-
index.js-
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
CSS Modules
သင်၏အပလီကေးရှင်းတွင်စတိုင်များထည့်ရန်နောက်ထပ်နည်းလမ်းမှာ CSS Modules ကိုအသုံးပြုရန်ဖြစ်သည်။
CSS Modules များသည် သီးခြားဖိုင်များတွင် ထည့်ထားသော အစိတ်အပိုင်းများအတွက် အဆင်ပြေပါသည်။
module တစ်ခုအတွင်းရှိ CSS သည် ၎င်းကိုတင်သွင်းသောအစိတ်အပိုင်းအတွက်သာရရှိနိုင်ပြီး အမည်ကွဲလွဲမှုများကို သင်စိုးရိမ်စရာမလိုပါ။
တိုးချဲ့မှု နှင့်အတူ CSS module ကိုဖန်တီးပါ .module.css
၊ ဥပမာ- my-style.module.css.
"my-style.module.css" ဟုခေါ်သော ဖိုင်အသစ်တစ်ခုကို ဖန်တီးပြီး ၎င်းတွင် CSS ကုဒ်အချို့ကို ထည့်သွင်းပါ-
my-style.module.css-
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
သင်၏ အစိတ်အပိုင်းတွင် ပုံစံစာရွက်ကို ထည့်သွင်းပါ-
Car.js-
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
သင့်လျှောက်လွှာတွင် အစိတ်အပိုင်းကို တင်သွင်းပါ-
index.js-
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));