Override bootstrap component's css style

Question

I'm stuck with this bootstrap Navbar.

this is my Navbar that I use from bootstrap library.

 <Navbar bg = "transparent" className = "me-auto" expand = "lg" sticky='top' collapseOnSelect>
            <Container>
            <Navbar.Brand href="#home">
                <img
                alt=""
                src={navBarLogo}
                height = "40"
                className="d-inline-block align-top"
                />{' '}
            </Navbar.Brand>
            <Navbar.Toggle/>
            <Navbar.Collapse  id="responsive-navbar-nav" style = {{"justifyContent": "right"}}>
                {/* TODO: refractor css later */}
                <Nav activeKey={navKey} onSelect={(selectedKey) => {setNavKey(selectedKey);}}>
                    <Nav.Link href = "#nhan-qua-tang" eventKey = "receiveGift" className = "active_nav_link"> Receive Gift</Nav.Link>
                </Nav>
            </Navbar.Collapse>
            </Container>
        </Navbar>

this is my CSS style that I want to apply

.inactive_nav_link {
    color: #6E7171;
}

.active_nav_link {
    color: #4FBA69
}

As I see in the console that my Nav.Link style is overriddened by the default className of bootstrap's Nav.Link.

How can I apply my own className to this Nav.Link?

Answer 1

You can use a more specific rule as described in "Instead of using !important" in this mdn css Specificity guide.

Changing:

.inactive_nav_link {
    color: #6E7171;
}

.active_nav_link {
    color: #4FBA69;
}

To:

.navbar-light .navbar-nav .nav-link.inactive_nav_link {
    color: #6E7171;
}

.navbar-light .navbar-nav .nav-link.active_nav_link {
    color: #4FBA69
}

Tested on React Bootstrap Navbars page