假设我有一个组件 ABC.tsx，我在其中导入了 CSS 文件 ABC.css。
ABC.css
.header{
width:10%;
}
同样，我有另一个组件 XYZ.tsx，我在其中导入了 CSS 文件 XYZ.css。
XYZ.css
.header{
width:100%;
}
这些类在各自的组件中使用。
但是，当我运行我的应用程序时，我注意到来自 XYZ 的类正在应用于 ABC，反之亦然。类不应该只从那些 CSS 文件本地应用到导入它们的组件吗？
React 是否处理所有 CSS 并将它们放在所有 HTML 标签之前，并根据处理它们的顺序应用它们？我这样说是因为我可以在检查的元素标签中看到在 HTML 开始之前有 2 个标签，它们都包含相同的代码。
【问题讨论】：
实际上嵌套 JS 应用程序中的样式将应用于索引文件的标题，因此它会影响代码的任何部分。如果您使用的是CRA （如果不是，您可能需要react-scripts@2.0.0 或更高版本）最简单的方法之一是为您的 CSS 文件使用 .module 扩展名，让捆绑包创建者让每个类对你来说都是独一无二的。
假设我们得到了ABC.css，我们应该像这样将.module 添加到其中ABC.module.css，然后像这样导入它：
import class from "ABC.module.css" // route to ABC.module.css
// rest of your file
return <div className={class.header}></div>
除了.module 方法之外，我们还可以使用许多其他出色的工具来确定适用于 React 应用程序的 CSS 范围，例如 Styled Components、Emotion 等等。
注意：感谢@hotpink，值得一提的是，同一属性上的CSS样式将根据它们的书写顺序或specificity相互覆盖，所以我们在这里看到的这种行为将不限于嵌套应用程序（例如 React），它可能在我们的前端应用程序中无处不在。
【讨论】：