Intro to React CSS Modules by@noomdalv

Intro to React CSS Modules

April 6th 2020 1,257 reads
Read on Terminal Reader
Open TLDR
react to story with heart
react to story with light
react to story with boat
react to story with money
React 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. The best and simpler way to import the CSS code to style it would be from just thefile.css. You will realize managing multiple. CSS selectors from several files into just one. file is not the ideal solution. Each component has its own CSS styling module.
image
Vlad Luna San HackerNoon profile picture

Vlad Luna San

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')
image

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
and
user_details.js
containers and a main
App.js
component the best and simpler way to import the CSS code to style it would be from just the
style.css
file.

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
is not the ideal solution. You will run into problems managing unique ids, classes and tag elements for each individual file so they dont end up overriding each other, here's where CSS Modules enter the game:

  • Image 2: CSS Modules Structure (Each component has its own CSS styling module)
image
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
  • Image 4: Book CSS Module
image

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

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

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!