Html 通过在CSS文件名中添加.module来启用ReactJS中的CSS模块

我是ReactJS新手，我正在阅读关于如何启用CSS模块的内容，我学到的是：

如果您添加.module，它将向所用类的名称添加base64哈希字符串

实际上，我创建了一个基于函数的组件

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;

当我在浏览器中检查

div

时：

<div class="Layout_bg__1bzIA">Here first div</div>

当我检查第二个div时，它看起来像：

<div class="Layout_bg__1bzIA">Here seond div</div>

这里是seonddiv

它们都使用相同的散列值，所以我的问题是我上面引用的是正确的吗

.module启用CSS模块

---

如果是，为什么它给不同组件中的不同元素提供相同的散列值？在我的理解模块中，允许您创建相同的类名，而无需将它们混合在一起。我的意思是，当您创建另一个具有相同类名的模块时（在您的例子中是bg），它将分配不同的哈希值，这意味着它们将具有不同的名称，因此这两个类永远不会混合在一起。

---

希望有帮助

在我的理解模块中，您可以创建相同的类名，而无需将它们混合在一起。我的意思是，当您创建另一个具有相同类名的模块时（在您的例子中是bg），它将分配不同的哈希值，这意味着它们将具有不同的名称，因此这两个类永远不会混合在一起。 希望有帮助

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 class="Layout_bg__1bzIA">Here seond div</div>