Bootstrap cdn 覆盖了我在 react js 中的自定义 css 样式

Posted 2023-02-22

【中文标题】Bootstrap cdn 覆盖了我在 react js 中的自定义 css 样式

【英文标题】：Bootstrap cdn overrides my custom css styles in react js

【发布时间】：2020-10-19 06:13:00

【问题描述】：

我使用 CSS 在 ReactJS 中设计了一个网页。对于其中一个组件，我使用 Bootstrap 进行样式设置。我使用了最新的引导 cdn 链接并将其粘贴到“index.html”文件中。当我使用该引导链接时，它会覆盖我的一些自定义样式。我项目的每个组件都有一个单独的 CSS 和 JS 文件。请提出任何解决方案，我应该将该引导链接放在我的项目中的哪个位置，以免它覆盖我的自定义 css 样式。谢谢。

【问题讨论】：

你尝试使用 !important 吗？你有同名的班级吗？

不，我在我的 css 文件中使用了自己的自定义类名。问题出在导航栏、页脚和一个表格中，我使用浮动属性向左或向右显示内容。

【参考方案1】：

感觉像是错误的 css 包含顺序。您可以在浏览器中查看。要解决此问题，您可以通过以下几种方式：

尝试在 head 部分（在 meta 之后）中将 bootstrap css 作为第一个 link 添加。 尝试通过import 将您的css 包含在您的index.js 文件中。

第二种方式应该是这样的：

import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css";
import "./styles.css";

【讨论】：

我在 head 部分的 标记下方包含了引导 css，但它仍然是覆盖的。我在 .js 文件中使用了 import './style.css' 并尝试通过链接标签将该文件包含在 index.html 中，但仍然无法正常工作。

你在你的js中导入./style.css之前有没有尝试导入bootstrap？请看我更新的帖子。

是的，我也这样做了，但仍然没有运气。下面是我的做法。我也尝试在我实际需要的同一组件中导入引导 css，但它正在对每个组件的 css 进行更改。从'react'导入反应，组件；导入'bootstrap/dist/css/bootstrap.css'；导入'./App.css';

明确一点：您是否删除了 index.html 文件中的引导程序包含？

是的，我从 index.html 中删除了它，然后检查了它。无论如何感谢您的帮助。我现在对我的自定义 css 进行了更改并相应地设置了样式，所以一切都很好。

【参考方案2】：

这很简单。在 bootstrap.css 下方链接您的自定义 CSS 文件并覆盖您的 custom.css 文件中的类。

您可以同时依赖后代选择器、ID 和“！important”符号来覆盖样式，但这违反了 CSS 最佳实践。只有在绝对必要时才能使用它们。

您可以简单地使用此方法。关注以下文章。我希望你能帮忙。

Override Bootstrap CSS styles

CSS Overrides