Menu
I use react-bootstrap, but I want to modify some of the elements, so I wrote my own custom.css. However it doesn't make any changes (only when I put !important, but the file is so large so it's not a good option).
import {MenuItem, Nav, Navbar, NavBrand, NavDropdown, NavItem} from "react-bootstrap";
import {LinkContainer, MenuItemLink} from "react-router-bootstrap";
import '../assets/css/custom.css';
This is what I did so far.
537
You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.
There are two main ways you can override Bootstrap CSS: Override using a higher specificity selector and properties via CSS. Using Bootstrap Sass variables (recommended)
Using CSS overrides is feasible for simple Bootstrap customizations, but for more extensive changes, SASS is the better method. Suppose for example you want to change the default blue “primary” color in Bootstrap to another color (eg. red). You can make a simple CSS override for the .
When are you importing the Bootstrap CSS? I have an app which successfully uses Bootstrap with some overrides, which does this at the top of its index.js:
require('bootstrap/dist/css/bootstrap.min.css')
require('./bootstrap-overrides.css')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
