Styling in React - CSS Modules and Styled Components

React doesn't force any styling opinion on you — you can use anything from plain CSS to CSS-in-JS libraries. Each approach has its own trade-offs.

Plain CSS Import

import './Button.css';

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

Simple, but class names live in global scope — in larger projects this can cause naming clashes (a .card class defined in one file gets overwritten by another).

CSS Modules — Scoped Class Names

// Button.module.css
.primary { background: #16a34a; color: white; }

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

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

The build tool (via the .module.css file) automatically makes class names unique (like Button_primary__a3f2) — so clashes just aren't a concern.

Styled Components — CSS-in-JS

npm install styled-components

import styled from 'styled-components';

const PrimaryButton = styled.button`
  background: #16a34a;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;

  &:hover {
    background: #15803d;
  }
`;

function Button() {
  return <PrimaryButton>Click Me</PrimaryButton>;
}

Styles live in the same JavaScript file as the component, and can be dynamic based on props (styled.button\`color: ${props => props.color}\`).

Which One Should You Choose?

• Plain CSS — small projects, when the team is already comfortable with CSS.
• CSS Modules — when you want build-time scoping without adding an extra library.
• Styled Components / Tailwind — larger projects, design systems, dynamic theming.

Key Takeaways

• React is styling-agnostic — use whichever approach fits.
• CSS Modules solve class name clashes at build time.
• Libraries like Styled Components/Tailwind give you dynamic, component-scoped styling.