如何使用自定义 css 文件覆盖 react-bootstrap

Posted 2023-02-22

【中文标题】如何使用自定义 css 文件覆盖 react-bootstrap

【英文标题】：how to override react-bootstrap with custom css file

【发布时间】：2016-01-07 09:38:59

【问题描述】：

我使用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';

这是我到目前为止所做的。

【问题讨论】：

首先确保你在 react 插件 CSS 之后加载你的 custom.css 并使用正确的 selector ，这样做你不会必须使用!important。

@vivekkupadhyay 之后是什么意思？我按以下顺序导入。

那么可能是它的选择器问题

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

【参考方案1】：

您何时导入 Bootstrap CSS？我有一个应用程序成功使用带有一些覆盖的 Bootstrap，它在其 index.js 的顶部执行此操作：

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