Styling in React

React မှာ style ရေးနည်းများစွာရှိပါတယ်။ Small project မှာ plain CSS လုံလောက်နိုင်ပြီး component-scoped style လိုချင်ရင် CSS Modules သုံးနိုင်ပါတယ်။ Design system ကြီးလာရင် Tailwind, styled-components, UI library စတာတွေကိုလိုအပ်သလိုရွေးနိုင်ပါတယ်။

// App.jsx
import './App.css';

function AlertBox() {
  return (
    <div className="alert-box">
      <strong>Tip:</strong> Component style ကို CSS file ထဲမှာခွဲရေးပါ။
    </div>
  );
}

// App.css
// .alert-box {
//   padding: 16px;
//   border-radius: 12px;
//   background: #eef6ff;
//   color: #102033;
// }

Component ထဲမှာ `className="alert-box"` ပေးပြီး CSS file ထဲမှာ `.alert-box` style ရေးထားပါတယ်။ ဒီနည်းက simple, readable, beginner-safe ဖြစ်ပါတယ်။

Padding, rounded corner, background color ပါတဲ့ tip box တစ်ခု ပေါ်လာမယ်။