我的 CSS 在 React 项目中被 Bootstrap 覆盖答案

【问题标题】：My CSS is overwritten by Bootstrap in a React project我的 CSS 在 React 项目中被 Bootstrap 覆盖
【发布时间】：2021-09-18 07:12:00
【问题描述】：

我一直在使用 React 构建一个非常简单的项目。以前，我使用自己的 CSS 文件构建了我的应用程序，并决定将引导程序引入项目中，以了解如何利用这两者。我很高兴我做到了，因为我面临一个小问题。我的大部分 CSS 都是用我的组件渲染的，但相当烦人的是，一种背景颜色被覆盖了。为了理解为什么我想我会尝试弄清楚。我能想出的最佳解决方案是利用 CSS 的级联功能，方法是在引导链接之后（在 index.html 的 <head> 内）输入我的 CSS 链接，如下所示：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="/src/App.css" />
<link rel="stylesheet" href="/src/components/Reservations/Reservations.css" />
<link rel="stylesheet" href="/src/components/ReservationForm/ReservationForm.css" />
<link rel="stylesheet" href="/src/components/Card/Card.css" />
<title>React App</title>

这没有达到我想要的效果，因为我的背景颜色仍未在屏幕上呈现。您可能已经看到，我的每个组件的 CSS 文件都位于我的文件树中相应的 .jsx 文件旁边。也许我应该有一个 CSS 目录？你都有些什么想法呢？提前谢谢！

【问题讨论】：

很可能是由于特异性权重。根据您提供的信息，我认为引导程序没有理由覆盖您的 css。
如果您检查您所指的元素，请选择开发工具中的“计算”选项卡。查看 background-color 属性，它应该显示影响它的规则。如果是特异性问题，这可能有助于您识别问题。
谢谢@tacoshy 和@Jeff！你们都让我朝着正确的方向前进。在我的 jsx 中，我给我的 card 组件一个 className 为“card”。原来.card 是引导程序中的一个关键字。一旦我将 className 更改为“reservation-card”，我就得到了我想要的东西。感谢您的宝贵时间！

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

尝试在您的 CSS 行中提及 !important。喜欢应用.css

div {
    padding: 10px !important;
}

【讨论】：

虽然这可能在技术上解决问题，但“只添加！important”通常是一个糟糕的主意。（事实上，添加!important 的人通常是导致这类问题的原因）

【解决方案2】：

正如@Khadim Rana 所说，您可以在您的css 规则之后使用!important，例如：

.my-awesome-class {
  background-color: blue !important;
}

但这不是最推荐的解决方案。 “最佳实践”是使您的 css 选择器比引导程序的选择器更精确：

.my-component-class .my-awesome-class {
  background-color: blue;
}

【讨论】：