Custom CSS doesn't override NavLink in React Bootstrap

Question

I am new to both React and Boostrap, so I have started playing with them using react-bootstrap. I heard that one of the simplest ways to override a boostrap CSS was to apply your own CSS on top of bootstrap CSS. So I have the following page

I have the following App.js

import React from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import "bootstrap/dist/css/bootstrap.css";
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


function App() {
  return (
    <Router>
      <Container fluid>
      <Navbar bg="dark" expand="lg" id="navbar-parent">
        <Navbar.Brand href="#home" id="navigation-bar">TURLS</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" variant="pills">
            <Nav.Link href="#home" className="whte">Home</Nav.Link>
            <Nav.Link href="#api" className="whte">API</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      </Container>
    </Router>
    );
}

export default App;

Following is the App.css

#navigation-bar {
  border-style: solid;
  padding: 15px;
  border-radius: 50px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 900;
  color: white;
  border-width: 5px;
  font-size: 1.5em;
}

#navigation-bar:hover {
  color: #3399ff;
}

.whte {
  color: white; 
}

I was able to override Nav.Brand's font and color using my own CSS and referencing it using CSS #id selector. But I wasn't able to override the Nav.Link's using a custom CSS class .whte. I was trying to override the color of Home and API, wanted to change the font, the pills size and background color, but I don't know how.

I can change the color of the text using !important, but I read somewhere that using that was not a nice way to customize things. Upon inspecting elements, I found out that the Nav.Links were getting their color from the following CSS classes despite my custom class .whte

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}

Similarly I found out that the blue colored nav-pills were actually part of the following classes

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0,0,0,.9);
}

and

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #007bff;
}

I am not sure what classes to customize for my desired effects to take place. I have tried adding my own CSS implementation, but that doesn't work.

So how does one usually go about customizing bootstrap css? Should I override all the CSS classes a boostrap element is associated with? Or should I put an ID on every elements and customize each of them separately with the same code.

My apologies if the question is too naive or ambiguous, I am just trying to understand the recommended way to change or customize a bootstrap CSS in React Bootstrap

Thanks for your help

`Nav.Link` has more priority than `.whte`. if you want to override `Nav.link` you have to write your selector like that `Nav.whte{...}` or maybe using an `#id.whte{...}` . — h3t1, Apr 26 '20 at 17:18

CanUver · Answer 1 · 2020-04-27T00:04:18.187

Well, you did a good search and you got the right results. As you said, using "important" on bootstrap elements is not considered to be the right method, but there is no other way to change bootstrap elements than to affect their own css files. For this you can assign CSS inline as you say" {{style : //like this}} " or you can create your own bootstrap classes. If you want to work with libraries in other styles, you can use libraries like material-ui. Like you said, there are 4 options :

1: Inline Css :

<Navbar.Brand href="#home" id="navigation-bar" style = {{color:'white'}}>TURLS</Navbar.Brand>

2: Custom Css :

 #navigation-bar {
       color : white !important;
    }

3: Acting on Bootstrap's own css files :

//in nodemodules, the bootstrap files that you downloaded to the navbar-related parts to affect.

4 : react-use classes that do not come with bootstrap but can be used on the bootstrap side :

<Navbar.Brand className = "text-light" href="#home" id="navigation-bar">TURLS</Navbar.Brand>

Good luck ! :)

`style={{/*your inline styles */ }}` should be like this for inline not as you mentioned `{{style : //like this}}` — Tammy, Apr 27 '20 at 00:06
If you are using `react` it should be `style={{/*your inline styles */ }}` as you mentioned in `TURLS` . checkout with https://www.w3schools.com/react/react_css.asp — Tammy, Apr 27 '20 at 00:15

score 0 · Answer 2 · answered Apr 27 '20 at 00:01

You are going good with your logic. As we all know An inline CSS will load faster if the CSS content size downloads faster than your server would respond to an external CSS file request (considering DNS time, server latency, etc).

You can use inline css here with style={{/*your styles */ }} .

You could check some good answer as mentioned some answer in SO.

Custom CSS doesn't override NavLink in React Bootstrap

2 Answers2