react-bootstrap css 覆盖自定义 css

Question

我试图使用 react-bootstraps 手风琴组件，但我意识到需要导入 import "bootstrap/dist/css/bootstrap.min.css"; 才能使手风琴工作。添加此导入后，我的所有自定义 css 都被 bootstrap 覆盖了。无论如何让我的 css 覆盖 bootstrap css？我在我的 index.html 到 link 我的样式表中使用 <link href="%PUBLIC_URL%/css/style.css" rel="stylesheet"/>。

Answer 1

你的 jsx code 应该这样写，你的自定义样式表的 link tag 应该放在 bootstrap cdn 下面，因为在JavaScript 代码将从上到下编译，因此您的自定义样式表将在 bootstrap cdn 之后编译。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">

<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>

那你就可以按照类喜欢的样式给

.alert{
background-color:red !important;
}

这将覆盖您的 bootstrap 默认样式。

额外提示 - 您应该在 index.html 文件中为 CSS 导入 bootstrap CDN，这样就不需要添加自定义样式表了。

react-bootstrap css 覆盖自定义 css

react-bootstrap css overriding custom css

css

reactjs

react-bootstrap

bootstrap-5