不能将两个 CSS styles 用于 2 个不同的组件

Question

所以我对 css 有疑问。我有一个登录页面，其中包含 css 和 styles。 其中之一是跨度：

登录.css：

span {
    font-size: 12px;
    padding: 3px;
    color: red;
    display: none;
}

并且在登录页面上工作正常，但现在我有“我的个人资料页面”并且我正在使用库中的 function (react-drag-drop-files)，这使我成为一个包含 span 元素的组件

正如我在这里看到的那样，它正在使用我尚未导入到我的 React function 中的 login.css 文件。所以我不能仅在“我的个人资料”页面中设置跨度样式，因为我无权访问它。 我还尝试在 myprofile.css 中创建新的跨度样式，但这弄乱了登录页面上的跨度。 所以我想我正在尝试找到一种方法来分离这两个文件，即使它们没有连接。

Answer 1

我不确定我理解你的问题。

您是否尝试过在登录页面中使用 className 作为 span 并在 css 中创建一个类？ 通过这样做，您应该只能修改登录页面跨度。

您还可以为每个页面创建不同的 css 文件。

希望这对你有帮助

Answer 2

这就是我发现您的 span 样式同时适用于登录页面和个人资料页面的方式。 这是因为你已经全局定位了 css 样式的范围，不要全局定位范围，在登录页面上为你的范围添加一个类并设置它们的样式

Answer 3

根据我对您问题的理解，我认为您可以尝试这些。

将父 class 添加到您的 login.css 文件中：

.parentClass span {
    font-size: 12px;
    padding: 3px;
    color: red;
    display: none;
} 

或者在 login.js 中将 class 名称添加到您的跨度中。

<span className="spanClass">
    // your style here
</span>

登录.css 文件

.spanClass {
    font-size: 12px;
    padding: 3px;
    color: red;
    display: none;
}