Being new to ReactJS, I recently learned about enabling CSS modules and discovered the following:
If you append .module to a class name, it will generate a base64 hash string for that class
As an example, I created a function-based component called Layout.js
import React from "react";
import classes from "./Layout.module.css";
const layout = props => <div className={classes.bg}>This is the first div</div>
export default layout;
and its corresponding css file Layout.module.css
.bg {
display: inline;
background-color: rgba(115, 251, 4, 0.685);
}
When inspecting the div in the browser:
<div class="Layout_bg__1bzIA">This is the first div</div>
Everything appeared to work properly. However, when I created another component named second.js and used the same class on a div within it
import React from "react";
import classes from "../Layout/Layout.module.css";
const second = props => <div className={classes.bg}>This is the second div</div>
export default second;
Upon inspecting the second div, it showed:
<div class="Layout_bg__1bzIA">This is the second div</div>
Both elements ended up with the same hash value. This raises the question of whether my initial understanding was correct
The use of .module enables CSS modules
If that's the case, why are different elements in different components receiving the same hash values?