How to Add CSS in React

What you’ll build or solve

You’ll style React components using the main supported CSS approaches.

When this approach works best

Adding CSS in React works best when you need to:

• Apply global layout and typography styles.
• Style individual components without class name conflicts.
• Add dynamic visual changes based on props or state.

Avoid mixing many styling patterns in the same component without a reason. Pick a method that fits your project and stay consistent.

Prerequisites

• A React app set up
• Basic CSS knowledge
• Familiarity with JavaScript imports

Step-by-step instructions

1) Import a global CSS file

The simplest way to add CSS is to create a .css file and import it into your component or root file.

Create a CSS file

/* src/App.css */
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

Import and use it

// src/App.jsx
import "./App.css";

export default function App() {
  return <div className="container">Hello</div>;
}

What to look for:

• Use className, not class.
• The import path must be correct.
• Global CSS affects matching selectors across the app.

2) Use CSS Modules for scoped styles

CSS Modules scope styles to the file that imports them. This prevents naming collisions.

Create a module file

/* src/Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
}

Import as an object

// src/Button.jsx
import styles from "./Button.module.css";

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

What to look for:

• The file name must end with .module.css.
• Access classes through the imported object.
• Class names are transformed automatically to avoid clashes.

3) Add inline styles with a JavaScript object

Inline styles use a JavaScript object assigned to the style prop.

export default function Box() {
  const boxStyle = {
    backgroundColor: "tomato",
    padding: "16px",
    borderRadius: "8px",
  };

  return <div style={boxStyle}>Styled box</div>;
}

Rules

• CSS properties use camelCase, such as backgroundColor.
• Numeric values default to pixels unless a unit is required.

What to look for:

• Inline styles work well for dynamic values.
• Move large style objects outside JSX to keep markup clean.

Examples you can copy

Example 1: Layout with global CSS

/* Layout.css */
.wrapper {
  max-width: 800px;
  margin: 0 auto;
}

import "./Layout.css";

export default function Layout({ children }) {
  return (
    <div className="wrapper">
      {children}
    </div>
  );
}

Example 2: Scoped button with CSS Module

/* PrimaryButton.module.css */
.primary {
  background: #0070f3;
  color: white;
  border: none;
  padding: 10px 16px;
}

import styles from "./PrimaryButton.module.css";

export default function PrimaryButton() {
  return (
    <button className={styles.primary}>
      Submit
    </button>
  );
}

Example 3: Dynamic inline style

export default function StatusBadge({ status }) {
  const style = {
    color: status === "error" ? "red" : "green",
  };

  return <span style={style}>{status}</span>;
}

Common mistakes and how to fix them

Mistake 1: Using class instead of className

What you might do:

<div class="container">Content</div>

Why it breaks:

class is reserved in JavaScript, so React uses className.

Fix:

<div className="container">Content</div>

Mistake 2: Forgetting to import the CSS file

What you might do:

export default function App() {
  return <div className="container">Hello</div>;
}

Why it breaks:

Without importing the CSS file, the styles are not applied.

Fix:

import "./App.css";

Troubleshooting

• If styles are not applied, confirm the CSS file is imported.
• If a CSS Module class is undefined, check the file ends in .module.css.
• If inline styles do not apply, confirm property names use camelCase.
• If styles conflict, check selector specificity and load order.

Quick recap

• Import .css files for global styles.
• Use CSS Modules for scoped component styles.
• Use inline styles for dynamic values.
• Use className, not class.
• Keep styling consistent across your project.