How to Add CSS in React

Use CSS in React when components need layout, spacing, colors, hover states, or responsive styling. The cleanest starting point is importing a CSS file into the component or app where the styles should apply.

What you’ll build or solve

You’ll learn how to add CSS in React with imported stylesheet files, inline styles, and CSS Modules. You’ll also know when each option makes the most sense.

When this approach works best

This approach is the right choice when React components need visual styling beyond plain HTML defaults.

Common real-world scenarios include:

• Page layouts
• Buttons and forms
• Card components
• Navigation bars
• Responsive sections

This is a bad idea when styling is scattered across too many methods in the same component tree without a clear reason.

Prerequisites

You only need:

• A React app
• A component to style
• Basic React and CSS knowledge

Step-by-step instructions

Step 1: Import a CSS file into your React component or app

The most common approach is creating a normal .css file and importing it into the component or entry file.

import "./App.css";

function App() {
  return (
    <div className="app">
      <h1 className="title">Welcome</h1>
      <button className="cta">Start lesson</button>
    </div>
  );
}

export default App;

Then add the styles in the CSS file.

.app {
  padding: 24px;
}

.title {
  color: #111827;
}

.cta {
  padding: 12px 24px;
  background: #0057ff;
  color: white;
  border: none;
  border-radius: 8px;
}

This works well for app-level styles and shared component styles.

Step 2: Use inline styles for quick one-off values

When a style is small and local, React also supports inline styles through a JavaScript object.

function Badge() {
  return (
    <span style={{ padding: "8px", backgroundColor: "#eef4ff" }}>
      New
    </span>
  );
}

What to look for:

• Import CSS files with import "./file.css";
• Use className, not class
• Inline styles use JavaScript objects
• CSS property names become camelCase in inline styles
• Normal CSS files are usually the cleanest default

Step 3: Use CSS Modules for component-scoped styling

When you want styles scoped to one component, use a CSS Module.

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

function Button() {
  return <button className={styles.cta}>Buy now</button>;
}

export default Button;

Then define the styles in the module file.

.cta {
  padding: 12px 24px;
  background: #111827;
  color: white;
  border: none;
  border-radius: 8px;
}

This helps avoid class name collisions in larger apps.

Examples you can copy

App-level CSS import

import "./App.css";

function App() {
  return <h1 className="title">Dashboard</h1>;
}

.title {
  font-size: 32px;
  color: #111827;
}

Inline style

function Notice() {
  return (
    <p style={{ color: "red", marginTop: "16px" }}>
      Payment failed
    </p>
  );
}

CSS Module

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

function Card() {
  return <div className={styles.card}>Pro plan</div>;
}

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

Common mistakes and how to fix them

Mistake 1: Using class instead of className

What the reader might do:

function App() {
  return <h1 class="title">Hello</h1>;
}

Why it breaks: JSX uses className, not class.

Corrected approach:

function App() {
  return <h1 className="title">Hello</h1>;
}

Mistake 2: Writing inline styles like normal CSS strings

What the reader might do:

<p style="color: red;">Error</p>

Why it breaks: React expects a JavaScript object, not a CSS string.

Corrected approach:

<p style={{ color: "red" }}>Error</p>

Mistake 3: Forgetting camelCase in inline styles

What the reader might do:

<div style={{ "background-color": "blue" }}>Box</div>

Why it breaks: inline style keys should use camelCase.

Corrected approach:

<div style={{ backgroundColor: "blue" }}>Box</div>

Troubleshooting

If the styles do not appear, confirm the CSS file is imported into the component or app.

If the class looks correct but nothing changes, check that the JSX uses className.

If inline styles fail, make sure the value is a JavaScript object with camelCase property names.

If styles leak between components, switch to CSS Modules for scoped class names.

Quick recap

• Import CSS files with import "./file.css";
• Use className in JSX
• Use inline styles as JavaScript objects
• Use camelCase for inline style properties
• Use CSS Modules when component-scoped styles are needed