ReactJS中两个不同的css文件中的相同类名冲突答案

【问题标题】：The same class name in two different css files conflict in ReactJSReactJS中两个不同的css文件中的相同类名冲突
【发布时间】：2022-02-11 18:27:01
【问题描述】：

我有一个组件文件夹和两个不同的组件，每个组件都有自己的 css 文件，链接在其 jsx 文件中。：

当我在其中使用相同的类名时，它也会影响其他组件！而另一个组件有自己的 css 文件和链接。这是为什么呢？

例如：在这两个组件中，我都有一个名为：“PlayerPhoto”的类当我改变它的高度和宽度时，其他组件中的照片（具有单独的 css 文件但类名相同）也会改变！

【问题讨论】：

除非您的构建过程修改了 CSS（例如 CSS 模块），否则它们最终仍将全部出现在同一页面上，并且标准 CSS 规则适用于它匹配的所有内容，无论 React 组件如何它来自。
你是如何使用 bundler 处理这些 CSS 文件的？

标签： css reactjs

【解决方案1】：

这是因为您的 css 只是像普通 css 一样导入 - 没有唯一标识符。您需要指定具有唯一名称的类或查看 Css Modules 解决此问题并自动创建唯一类

或者您可以将库用作EmotionJS 或styled-components

【讨论】：

【解决方案2】：

您的 app.js 文件可能具有 className="PlayerPhoto" 的属性，请确保您的 app.css 没有相同的 className（如果有），然后它会覆盖您的组件基础 css。您也可以使用内联 css 来解决此类问题。

【讨论】：