html - 通过向 CSS 文件名添加 .module 在 ReactJS 中启用 CSS 模块

Question

我是 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

如果是，为什么它给不同组件中的不同元素赋予相同的哈希值

Answer 1

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