我在反应中的 css 类正在影响不同的页面答案

【问题标题】：My css classes in react are afecting diferent pages我在反应中的 css 类正在影响不同的页面
【发布时间】：2020-09-05 17:02:39
【问题描述】：

大家好，这是我的问题，我在 react 中有一个名为“Page1.js”的页面，其中有一个 <div className='container' >，并且此 Page1.js 从另一个名为 page1.css 的文件中导入 css 样式 import './page1.css'.

在这个 page1.css 中，我创建了一个名为 '.container' 的类，它具有类似的属性

.container {
background-color:blue

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

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

因此，例如，如果我在这个新的“page2.js”中自动创建一个 div <div className='container' > ，这个 div 将具有蓝色背景。但我没有在我的“page2.js”上导入文件“page1.css”。

我的问题是：

为什么没有导入文件 page1.css 的 page2.js 正在获取类的属性？
无论如何，我是否可以在不同的 jsx 页面上使用具有相同名称的类 css 并且这些类不会相互覆盖？
现在为了摆脱这个问题，对于我创建的每个类，我将页面名称放在类中，例如-------------> page1-container {background-color:blue} 是正确的做什么？

【问题讨论】：

【解决方案1】：

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

导入只是提示 webpack（或者可能是其他捆绑器）创建单独的 css 文件。

要使其私有且仅可用于带有 import 的文件，您必须使用 css.modules

尝试做一个实验。从 page1.css 重命名文件 -> page1.module.css

并像这样从这个文件中导入样式：

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

并应用它：

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

【讨论】：