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";

exportdefaultfunctionApp() {
return<divclassName="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:8px16px;
}

Import as an object

// src/Button.jsx
importstylesfrom"./Button.module.css";

exportdefaultfunctionButton() {
return (
<buttonclassName={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.

exportdefaultfunctionBox() {
constboxStyle= {
    backgroundColor: "tomato",
    padding: "16px",
    borderRadius:"8px",
  };

return<divstyle={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:0auto;
}

import"./Layout.css";

exportdefaultfunctionLayout({ children }) {
return (
<divclassName="wrapper">
      {children}
</div>
  );
}

Example 2: Scoped button with CSS Module

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

importstylesfrom"./PrimaryButton.module.css";

exportdefaultfunctionPrimaryButton() {
return (
<buttonclassName={styles.primary}>
      Submit
</button>
  );
}

Example 3: Dynamic inline style

exportdefaultfunctionStatusBadge({ status }) {
conststyle= {
    color:status==="error"?"red": "green",
  };

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

Common mistakes and how to fix them

Mistake 1: Using class instead of className.

What you might do:

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

Why it breaks:

class is reserved in JavaScript, so React uses className.

Fix:

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

Mistake 2: Forgetting to import the CSS file

What you might do:

exportdefaultfunctionApp() {
return<divclassName="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.