React CSS Modules

React CSS Modules

CSS Modules are an excellent, industry-standard way to safely scope your custom CSS to a specific component, completely preventing terrifying global CSS class name conflicts and overlaps. When using modern build tools like Create React App, CSS Modules are broadly supported straight out of the box.

Using CSS Modules

You must accurately name your targeted CSS file with the strict .module.css extension.

/* Button.module.css */
.btn { background-color: blue; color: white; }

import styles from './Button.module.css';
const Button = () => <button className={styles.btn}>Click Me</button>;