Styling in React

Relax. We'll talk through this in plain words — no textbook voice.

There's more than one way to style React apps. Plain CSS is often enough for a small project, and CSS Modules work well when you want component-scoped styles. As your design system grows, you can reach for Tailwind, styled-components, or a UI library, whatever fits.

jsx

// 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;
// }

The component gets a `className="alert-box"`, and the styles for `.alert-box` live in the CSS file. It's simple, readable, and safe for beginners.

You should see

A tip box appears with padding, rounded corners, and a background color.

Info

Inline styles are fine for one or two dynamic values, but once you're writing a lot of design, a CSS file with classes stays cleaner.

Easy traps

Writing `class="alert-box"` in JSX is one of the most common beginner slip-ups. In React, use `className` instead.