Class names and inline styles

React components usually style UI with CSS classes (global, CSS modules, or utility frameworks) or occasional inline styles for one-off dynamic values. The playground has no build step—use plain className strings and object styles like production, minus Sass imports.

className, not class

JSX uses className because class is reserved in JavaScript. Apply static classes as strings; combine conditional classes with template literals or a small helper array joined with spaces.

const base = 'badge';
const tone = isError ? 'badge-error' : 'badge-ok';
return <span className={`${base} ${tone}`}>Status</span>;

Inline style objects

style accepts a camelCased object. Values are often strings with units. Prefer classes for layout; use inline styles when a value is computed at runtime (width from data, dynamic theme token).

<div style={{ width: `${pct}%`, opacity: disabled ? 0.5 : 1 }} />

Interview angle

1. Q: className vs style?
   A: Classes scale with design systems and pseudo-states; inline styles suit dynamic numeric values but do not support media queries or :hover without libraries.
2. Q: Why avoid inline styles for everything?
   A: Harder to reuse, no pseudo-classes, and larger rerender payloads when objects are recreated each render.

Self-check

1. When would you pick inline style over a CSS class?
2. How do you toggle two classes based on a boolean prop?