-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Learn React with TypeScript
By :

In this section, we’ll begin by understanding CSS modules and use them within the alert component we have been working on.
CSS modules is an open source library available on GitHub at https://github.com/css-modules/css-modules, which can be added to the bundling 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 Vite 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. In the preceding code snippet, the CSS class name information is imported into a variable...