我是 ReactJS 的新手,我正在阅读有关如何启用 CSS 模块的内容,我得到的是:
If you add .module it will add a base64 hash string to the name of classes used
实际上我创建了一个基于函数的组件Layout.js
import React from "react";
import classes from "./Layout.module.css";
const layout = props => <div className={classes.bg}>Here first div</div>
export default layout;
和 css 文件作为 Layout.module.css
.bg {
display: inline;
background-color: rgba(115, 251, 4, 0.685);
}
当我在浏览器中检查 div
时:
<div class="Layout_bg__1bzIA">Here first div</div>
一切似乎都工作正常,但是当我创建另一个组件 second.js
其中有一个 div 并应用相同的类时
import React from "react";
import classes from "../Layout/Layout.module.css";
const second = props => <div className={classes.bg}>Here second div</div>
export default second;
当我检查第二个 div 时,它看起来像:
<div class="Layout_bg__1bzIA">Here seond div</div>
他们都采用相同的哈希值,所以我的问题是我上面引用的是对的
.module enables CSS modules
如果是,为什么它给不同组件中的不同元素赋予相同的哈希值
最佳答案
在我的理解中,模块允许您创建相同的类名而无需将它们混合在一起。我的意思是,当您创建另一个具有相同类名的模块(在您的例子中是 bg)时,它将分配不同的哈希值,这意味着它们将具有不同的名称,因此这两个类永远不会混合在一起。 希望有所帮助。
关于html - 通过向 CSS 文件名添加 .module 在 ReactJS 中启用 CSS 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56316220/