如何使用自定义CSS文件覆盖React-Bootstrap？

Question

我使用 react-bootstrap，但我想修改一些元素，所以我编写了自己的 custom.css。然而，它并没有进行任何更改（只有当我添加 !important时，但由于文件太大，这不是一个好的选项）。

import {MenuItem, Nav, Navbar, NavBrand, NavDropdown, NavItem} from "react-bootstrap";
import {LinkContainer, MenuItemLink} from "react-router-bootstrap";
import '../assets/css/custom.css';

这是我目前所做的事情。

- kreadteff

---

首先确保在加载react插件CSS之后再加载custom.css，并使用适当的选择器，这样就不必使用!important了。 - vivekkupadhyay

@vivekkupadhyay，您所说的“after”是什么意思？我按照以下顺序进行导入。 - kreadteff

可能是选择器问题。 - vivekkupadhyay

@vivekkupadhyay 但我也在修改类，.navbar即 - kreadteff

Answer 1

你什么时候导入Bootstrap CSS？我有一个应用程序成功地使用了Bootstrap，并进行了一些覆盖，它在index.js的顶部执行以下操作：

require('bootstrap/dist/css/bootstrap.min.css')
require('./bootstrap-overrides.css')

- Jonny Buchanan