Html 我在react中的css类正在寻找不同的页面

大家好，这就是我的问题，我在react中有一个名为“Page1.js”的页面，其中有一个

，这个Page1.js从另一个名为Page1.css的文件中导入css样式

import./page1.css'

在这个page1.css中，我创建了一个名为“.container”的类，它的属性如下

.container {
background-color:blue

嗯，到目前为止没有问题，我的div的背景是蓝色的

当我创建另一个类似“page2.js”的页面，并且创建另一个具有相同名称的类的div时，问题就开始了

例如，如果我在这个新的“page2.js”中自动创建一个div

，这个div的背景将是蓝色的。但是我没有在我的“page2.js”中导入文件“page1.css”

我的问题是：

为什么没有导入文件page1.css的page2.js会获取类的属性

我在不同的jsx页面上使用相同名称的css类，并且这些类不会相互覆盖，这对我来说有什么好处吗

现在为了避免这个问题，对于我创建的每个类，我都将页面的名称放在类中，比如----------------->

page1 container{background color:blue}

这样做对吗

---

这是因为当您从上一个文件调用import时，CSS是全局应用的

导入只是一个提示，提示webpack（或者其他捆绑包）创建一个单独的css文件

---

要使其私有化，并且仅可用于带有导入的文件，如果您使用的是

next.js

，则必须使用

page1.module.css

如果您使用的是

create react app

样板文件，则无需添加模块

import styles from "./page1.module.css"

<div className={styles.background}>Test </div>