Styling Components

Import a CSS file

Vite supports importing CSS from a component or from main.jsx.

import "./App.css";

function App() {
  return <main className="app">Hello</main>;
}

Conditional classes

Build class strings from state when styles change with UI state.

const className = isActive ? "tab tab--active" : "tab";
return <button type="button" className={className}>Tab</button>;

Inline styles when needed

Pass a style object for one-off values. Prefer CSS files for most layout and theme work.

<p style={{ color: "#0b3d2e", fontWeight: 600 }}>Note</p>

Keep styles predictable

Start with plain CSS or CSS modules. Add UI libraries later once components and state feel comfortable.