Intro to React CSS Modules

CSS Modules helps you create independent and customized cascading style sheets for any .js file rendering HTML in your React application.

If you are beginning to learn React and find yourself creating small projects you won't have any issue getting all your CSS code from a main file:

• Image 1: Basic Project Structure (All CSS code is exported from './css/style.css')

Here we have a simple React project structure for a simple application which doesn't require a big amount of styling, given the fact that is only composed by

user_list.js

user_details.js

App.js

style.css

So... what happens when your application gets bigger and you need to start styling a considerable amount of components? You will realize managing multiple CSS selectors from several files into just one

style.css

• Image 2: CSS Modules Structure (Each component has its own CSS styling module)

Modular CSS gives you the advantage of importing CSS to each individual React component by passing the '

styles

' object with the mapped properties of its own CSS file.

Let's take a look at the Book component:

• Image 3: Book Component

• Image 4: Book CSS Module

As you can see in the above example, all we need to do is a simple import:

import styles from './ComponentName.module.css';

Then, we can access every property with the styles object :

<div id={styles.mainContainer}>
  <h1 className={styles.blueHeader}>Hello World</h1>
</div>

*It's suggested to use camelCase for CSS selectors in order to avoid unexpected behaviors.

Composing from other CSS modules:

It's also possible to import another CSS module to compose mixed properties:

.bigGreenBox {
  composes: bigBox from "./style.css";
  background-color: green;
}

Conclusions

• React CSS Modules offers local CSS scoping for every component.
• CSS Modules export an object with all CSS mappings from that particular file.
• CSS Modules provide the advantage of avoiding conflicts between CSS selectors.

Links

• CSS Modules Docs
• Webpack Info
• NPM CSS Modules

If you made it this far i hope this article helped you in one way or another, thanks for reading!