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
Button.module.css:
.button {
background-color: #6200ea;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #3700b3;
}
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;
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 usingstyles.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!
Top comments (0)