Styling in React | Learn Computer Academy

React doesn't require any one styling approach — it's unopinionated here, and several genuinely common patterns exist side by side in real projects.

Plain CSS

A regular .css file, imported directly into a component, works with the build tooling from the Setup lesson — the same CSS you already know from the CSS section, applied with className instead of HTML's class:

import './Button.css';

function Button({ children }) {
  return <button className="btn-primary">{children}</button>;
}

.btn-primary {
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

Plain CSS has no scoping

Plain CSS class names are global across the whole app — a class named .card in one file collides with any other file that also defines .card. This is exactly the problem CSS Modules solves.

CSS Modules

A file named *.module.css gets special handling from the build tool: each class name is automatically rewritten to something unique, so styles never leak between components:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.primary}>{children}</button>;
}

/* Button.module.css */
.primary {
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

styles.primary resolves to something like Button_primary__a1b2c at build time — genuinely unique, no manual naming convention needed to avoid collisions.

Inline Styles

The style prop takes a JavaScript object, not a CSS string — property names are camelCase, matching JavaScript convention rather than CSS's hyphenated one:

function Box({ color }) {
  return <div style={{ backgroundColor: color, padding: '16px' }}>Content</div>;
}

Inline styles for dynamic values, CSS files for the rest

Inline styles are the right tool specifically for a value computed at runtime (a color from props, a position from a drag interaction) — for anything static, a CSS file or CSS Module is easier to maintain and supports things inline styles can't, like :hover or media queries.

Conditional Class Names

Combining classes based on state or props is common enough that most real projects reach for a small helper library (clsx or classnames) rather than string-concatenating by hand:

function Button({ variant, children }) {
  return (
    <button className={variant === 'danger' ? 'btn btn-danger' : 'btn'}>
      {children}
    </button>
  );
}