How to Import CSS Files in React Components

When I first started working with React, one of the common questions I encountered was how to properly import CSS files into React components. Styling React apps might seem simple, but there are several methods and best practices that can make your code cleaner, more maintainable, and scalable.

In this article, I will walk you through the different ways you can import CSS files into your React components. I’ll share practical examples based on my experience, so you can pick the method that best fits your project needs.

Table of Contents

Import CSS Files in React Components

React promotes building reusable components, and styling these components effectively is key to a professional UI. Importing CSS files directly into components helps keep styles scoped and organized, avoiding conflicts and making maintenance easier.

Method 1: Import a Global CSS File

The easiest way to add CSS to your React app is by importing a global CSS file in your main JavaScript file, typically index.js or App.js. This method applies styles globally across your app.

In my early React projects, I started with a global CSS file because it’s simple and quick to implement.

Step-by-step:

Create a CSS file, say styles.css, in your src folder.

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f6f8;
  margin: 0;
  padding: 0;
}

h1 {
  color: #2c3e50;
}

Import this CSS file in your index.js or App.js.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles.css';  // Import global CSS
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

I executed the above example code and added the screenshot below.

Now, all components will inherit these styles.

This method is great for base styles like typography, resets, or layout grids that apply universally.

Method 2: Import CSS Files Directly in Components

As your app grows, you may want to keep styles closer to the components they belong to. React supports importing CSS files directly inside component files.

For a US-based retail app I worked on, I preferred component-level CSS imports to keep styles modular.

Example:

Create a CSS file for your component, e.g., ProductCard.css.

/* ProductCard.css */
.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-title {
  font-weight: bold;
  color: #34495e;
  margin-bottom: 8px;
}

Import the CSS file inside the component file.

// ProductCard.jsx
import React from 'react';
import './ProductCard.css';

const ProductCard = ({ title, price }) => {
  return (
    <div className="product-card">
      <h2 className="product-title">{title}</h2>
      <p>Price: ${price}</p>
    </div>
  );
};

export default ProductCard;

Use the component anywhere in your app.

// App.jsx
import React from 'react';
import ProductCard from './ProductCard';

const App = () => {
  return (
    <div>
      <ProductCard title="Wireless Headphones" price={99.99} />
      <ProductCard title="Smartwatch" price={149.99} />
    </div>
  );
};

export default App;

I executed the above example code and added the screenshot below.

How to Import CSS Files in React Components

Advantages

Styles are scoped by file, making it easier to maintain.
Reduces the risk of CSS conflicts.
Easier collaboration since styles live close to components.

Method 3: CSS Modules for Scoped Styling

If you want even stronger style encapsulation, CSS Modules are the way to go. They automatically generate unique class names, preventing style clashes.

How I Use CSS Modules

In a fintech app for a US client, I used CSS Modules to ensure no styles leaked between components.

Steps:

Rename your CSS file to [name].module.css, e.g., Button.module.css.

/* Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

Import the CSS module in your React component.

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

const Button = ({ label, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

Use the button component.

// App.jsx
import React from 'react';
import Button from './Button';

const App = () => {
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <Button label="Submit" onClick={handleClick} />
    </div>
  );
};

export default App;

Automatic unique class names prevent collisions.
Maintains CSS specificity and inheritance.
Works well with large teams and complex apps.

Method 4: Use Styled Components (CSS-in-JS)

While not a CSS file import per se, styled-components is a popular way to style React components using JavaScript. I’ve found it useful in projects where dynamic styling is needed.

// StyledButton.jsx
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #28a745;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #218838;
  }
`;

const StyledButton = ({ label, onClick }) => {
  return <Button onClick={onClick}>{label}</Button>;
};

export default StyledButton;

When styles depend on props or component state.
For theming and design systems.
When you prefer co-locating styles as JavaScript.

Tips for Managing CSS in React Projects

Organize styles in a dedicated folder like src/styles or alongside components.
Use naming conventions consistently (BEM or camelCase).
Minimize global CSS to avoid unexpected overrides.
Consider CSS preprocessors like Sass if your project demands complex styles.
Use tools like ESLint with style rules to maintain code quality.

Styling React components effectively can significantly improve your development workflow and app quality. Whether you choose global CSS imports, component-level CSS, CSS Modules, or CSS-in-JS libraries, understanding these options helps you make the right decision for your project.

If you’re building a React app for the US market, remember to keep accessibility and responsive design in mind. Clean, maintainable CSS makes it easier to adapt your UI for different devices and user needs.