Hello everyone,
Hope you are doing well.
This will be a very small article where I will talk about how to get started with CSS Modules in React Apps. Without wasting much time lets get into it.
Problem with CSS
The CSS defintions in React are global scoped - meaning two or more classes with same name conflict with each other. Handling CSS becomes messy as the size of the project grows.
Why CSS Modules?
A CSS module is .css
file where classes behave like Javascript variables. CSS Modules localize the class
names and allow the users to use the same class names across the project.
They automatically create unique className
for the CSS class using the format [filename]\_[classname]\_\_[hash]
and scope the CSS classes locally.
For more information, read the docs.
How to use CSS Modules
Using CSS modules is very easy. We need to name our files in the format *.module.css*
. It is considered as a good practice to name the css module file with the same name as the component name in which it will be used.
|__Components
|__Homepage
|__Homepage.js
|__Homepage.module.css
// Define the classes normally as we define in normal css files
.container {
display:flex;
flex-direction: column;
width: min(90vw - 2em, 80em);
margin: 0 auto;
}
While using these classes we need to use the format {styles.container}
where styles
is the name which we are using to import and container
is the css classname defined in our .module.css
file. They are imported and used as shown below.
import styles from "./Homepage.module.css";
export default function Homepage(props) {
return (
<div className={styles.container}>....content</div>
)
}
Using more than one CSS class for a component
It is not likely that all our css is written in one single class. We might have normal CSS classes coming from component libraries and other css module classes too. They can be used as below
<div
className={`${styles.classone} ${styles.classtwo} flex flex-column`}>
content
</div>
classone
and classtwo
are classes defined in *.module.css
file and flex
and flex-column
are normal css classes defined in component libraries.
Here is a link to Code Sandbox where I have created two components and styled them using CSS modules.
That's all for this article.
Thanks for reading.