Using CSS modules

In this section, we will learn about an approach to styling React apps called CSS modules. We will start by understanding CSS modules and then we will use them within the alert component that we have been working on.

Understanding CSS modules

CSS modules is an open source library available on GitHub at https://github.com/css-modules/css-modules, which can be added to the webpack process to facilitate the automatic scoping of CSS class names.

A CSS module is a CSS file, just like in the previous section; however, the filename has an extension of .module.css rather than .css. This special extension allows webpack to differentiate a CSS module file from a plain CSS file so that it can be processed differently.

A CSS module file is imported into a React component file as follows:

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

This is similar to the syntax of importing plain CSS, but a variable is defined to hold CSS class name mapping information...