React CSS Styling

React CSS Styling: Choosing the Right Styling Approach

React does not enforce a single CSS system, so teams choose between plain stylesheets, CSS Modules, inline style objects, and utility frameworks like Tailwind CSS. Each method solves different problems around style scoping, dynamic values, and bundle size.

Comparing Common React Styling Methods

Pick a styling method based on team size, dynamic theme needs, and build tooling. CSS Modules keep styles isolated without extra runtime overhead, whereas Tailwind CSS speeds up layout work directly inside JSX class attributes.

Scoped CSS Modules Example

Vite and Next.js support CSS Modules out of the box for any file ending in .module.css. Imported class names receive unique hashes at build time so .badge in one component never collides with .badge in another.

/* AlertBox.module.css */
.box {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

.urgent {
  border-color: #dc2626;
  background-color: #fef2f2;
}

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

export function AlertBox({ urgent, progress, message }) {
  const boxClass = urgent ? `${styles.box} ${styles.urgent}` : styles.box;

  return (
    <div className={boxClass}>
      <p>{message}</p>
      <div style={{ width: `${progress}%`, height: '4px', background: '#2563eb' }} />
    </div>
  );
}

Common CSS Mistakes in React

• Using Kebab-Case Keys in Inline Styles: Writing style={{ 'background-color': 'red' }} or missing camelCase (backgroundColor) fails type checks and triggers warnings.
• Overusing Inline Styles for Static Rules: Inline style objects cannot express :hover, :focus-visible, or @media queries. Reserve inline styles for runtime numbers like progress bar widths.

Frequently Asked Questions

How do I apply multiple CSS Module classes cleanly?

Use template literals (${styles.btn} ${styles.primary}) or a tiny helper package like clsx to join conditional class strings.

Does React automatically scope regular import './Card.css' files?

No. Standard CSS imports remain global across your entire app, which is why CSS Modules or Tailwind CSS are preferred for component isolation.

Can I omit 'px' on numeric inline CSS properties?

Yes. For properties like width: 24 or paddingTop: 12, React appends 'px' automatically unless the property is unitless like opacity or zIndex.