Not able to change color of NavLink (React Bootstrap)

Question

I am having a hard time changing the color of NavLink inside the NavBar when it is inactive and when you hover over it.

  <Navbar className="navbar-spacing justify-content-center"  expand="lg">
        <Navbar.Brand href="#home">
        <img
          src={logo}
          width="270"
          className="d-inline-block align-top"
          alt="Overland NInja Logo"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="on-nav" />
      <Navbar.Collapse id="on-nav">
        <Nav className="mr-auto" >
          <Nav.Link className="inactive"  href="#">Home</Nav.Link>
          <Nav.Link className="inactive"  href="#">Contributors</Nav.Link>
          <Nav.Link className="inactive" href="#">Newsletter</Nav.Link>
          <Nav.Link className="inactive" href="#">Contact Us</Nav.Link>
        </Nav>

        <Nav>
          <Nav.Link className="inactive" href="#">Browse Overlanding Routes</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

This is my CSS code:

.inactive {
    color: #000;
}

.inactive:hover {
    color: #1D8F32;
}

The style doesn't seem to be applied and the color is not changing at all (Even when it's active and inactive).

Answer 1

You can pass in a bsPrefix prop to replace the generated css class name of the react bootstrap component.

import { Navbar, Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import "./styles.css";

const customClass = "myCustomNavLink";

export default function App() {
  return (
    <Navbar className="navbar-spacing justify-content-center" expand="lg">
      <Navbar.Toggle aria-controls="on-nav" />
      <Navbar.Collapse id="on-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#" bsPrefix={customClass}>
            Home
          </Nav.Link>
          <Nav.Link href="#" bsPrefix={customClass}>
            Contributors
          </Nav.Link>
          <Nav.Link href="#" bsPrefix={customClass}>
            Newsletter
          </Nav.Link>
          <Nav.Link href="#" bsPrefix={customClass}>
            Contact Us
          </Nav.Link>
        </Nav>

        <Nav>
          <Nav.Link className="inactive" href="#">
            Browse Overlanding Routes
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

---

// styles.css

.myCustomNavLink {
  color: #000;
}

.myCustomNavLink:hover {
  color: #1d8f32;
}

Note that by doing this, the default class of nav-link is no longer applied. As such, you might need to consider copying other nav-link styles to your custom stylesheet (padding, display, etc).

---

The other option is just matching or increasing the specificity of the bootstrap selector used for Nav.Link

// styles.css

.navbar-light .navbar-nav .nav-link.inactive {
  color: #000;
}

.navbar-light .navbar-nav .nav-link.inactive:focus,
.navbar-light .navbar-nav .nav-link.inactive:hover {
  color: #1d8f32;
}