CSS Modules let you use the same CSS class name in different files without worrying about naming clashes.
Button.module.css
.error { background-color: red; }
another-stylesheet.css
.error { color: red; }
Button.js
import React, { Component } from 'react'; import styles from './Button.module.css'; // Import css modules stylesheet as styles import './another-stylesheet.css'; // Import regular stylesheet class Button extends Component { render() { // reference as a js object return <button className={styles.error}>Error Button</button>; } }
Result
<!-- This button has red background but not red text --> <button class="Button_error_ax7yz">Error Button</button>
References
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/