具有相同类名的不同类在不同组件中单独导入，相互覆盖 - React

Posted 2023-02-22

【中文标题】具有相同类名的不同类在不同组件中单独导入，相互覆盖 - React

【英文标题】：Different classes with same classname imported seperately in different components, overrides one another - React

【发布时间】：2020-10-24 20:06:11

【问题描述】：

假设我有一个组件 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 个标签，它们都包含相同的代码。

【参考方案1】：

实际上嵌套 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），它可能在我们的前端应用程序中无处不在。

【讨论】：

只是为了添加到您的正确答案中，值得指出的是，这不是 React 特定的行为。 CSS 具有默认的全局范围。 “两个 CSS 属性走进了一个酒吧。一个完全不同的酒吧里的酒吧凳倒了。”