DEV Community

Md Yusuf
Md Yusuf

Posted on

Implementing CSS Modules in Your React Project

CSS Modules in React are a way to scope CSS by automatically generating unique class names. This prevents class name collisions in large applications and allows for modular styles. Here's how you can use CSS Modules in a React project:

1. Setup

By default, React supports CSS Modules. You just need to name your CSS file with the extension .module.css.

2. Example Setup

File Structure:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css
Enter fullscreen mode Exit fullscreen mode

Button.module.css:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}
Enter fullscreen mode Exit fullscreen mode

Button.js:

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

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

export default Button;
Enter fullscreen mode Exit fullscreen mode

How It Works:

  • Button.module.css: You define CSS rules like any normal CSS file.
  • styles.button: The class names from the CSS module are imported as a JavaScript object. You reference them using styles.className.

Benefits:

  • Scoped styles: Each class is locally scoped to the component, avoiding name collisions.
  • Maintainability: As your application grows, your CSS remains modular and easier to manage.

Let me know if you need help with specific cases!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay