Using CSS Modules In React
| Topic | Source |
|---|---|
| 🧩 React | React - Udemy |
CSS Modules are a common alternative to styled-components.
They have the benefit of keeping your styling and your code separate, by utilizing CSS files.
To use CSS Modules, your projects need to be configured to use them. Create-React-App does this by default.
To use CSS Modules, you name your CSS file with a module extension, e.g. Button.module.css.
You then import your CSS file like this
import styles from './Button.module.css';
The styles import represents an object with all your styles as properties, so you can append those styles like this:
<button className={styles.button}>
CSS Modules then creates unique class names for each time you use it.