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

【问题标题】：Bootstrap cdn overrides my custom css styles in react jsBootstrap cdn 覆盖了我在 react js 中的自定义 css 样式
【发布时间】：2020-10-19 06:13:00
【问题描述】：

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

【问题讨论】：

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

标签： javascript css reactjs twitter-bootstrap react-bootstrap

【解决方案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

【讨论】：