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

Question

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

Answer 1

实际上，嵌套 JS 应用程序中的样式将应用于索引文件的 header ，因此它将影响代码的任何部分。如果您使用CRA (如果没有，您可能需要 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196b7c787a6d346a7a6b70696d6a592b37293729" rel="noreferrer noopener nofollow">[email protected]</a> 或更高版本)完成这项工作的最简单方法之一是使用 .module CSS 文件的扩展名，让 bundle 创建者为您打造独一无二的类。

假设我们有 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)，它可能发生在我们前端应用程序的任何地方。