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?

Does this help https://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap There is a 2021 answer for Bootstrap 5 in particular. — A Haworth, Jan 28 '22 at 06:08
I think the link you gave me is about the default CSS file related to navbar. I'm wondering that is there any way I can override my own CSS class and if it is possible, can it combine with the default one. — Hoangdz, Jan 28 '22 at 07:10

score 0 · Answer 1 · answered Jan 31 '22 at 06:15

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

Override bootstrap component's css style

1 Answers1