What are CSS Modules in React?

CSS Modules are CSS files where class names and animation names are locally scoped by default. Name these files as style.module.css for enabling this. After importing these files into a React component, an object is returned, which maps your original class names to unique, generated class names. This prevents global CSS conflicts between components.

/* styles.module.css */
.button { background-color: red;
}
import styles from './styles.module.css';
<button className={styles.button}>Click</button>