覆盖引导组件的 css 样式答案

【问题标题】：Override bootstrap component's css style覆盖引导组件的 css 样式
【发布时间】：2024-05-23 00:05:02
【问题描述】：

我被这个引导导航栏卡住了。

这是我从引导库中使用的导航栏。

 <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>

这是我要应用的 CSS 样式

.inactive_nav_link {
    color: #6E7171;
}

.active_nav_link {
    color: #4FBA69
}

正如我在控制台中看到的，我的 Nav.Link 样式被引导程序的 Nav.Link 的默认 className 覆盖。

如何将我自己的 className 应用到这个 Nav.Link？

【问题讨论】：

这有帮助吗*.com/questions/18529274/… 特别是 Bootstrap 5 有一个 2021 年的答案。
我认为你给我的链接是关于与导航栏相关的默认 CSS 文件。我想知道有什么方法可以覆盖我自己的 CSS 类，如果可能的话，它可以与默认的类结合使用吗？

标签： css reactjs twitter-bootstrap navbar react-bootstrap

【解决方案1】：

您可以使用此mdn css Specificity guide 中的“而不是使用！important”中所述的更具体的规则。

变化：

.inactive_nav_link {
    color: #6E7171;
}

.active_nav_link {
    color: #4FBA69;
}

收件人：

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

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

在React Bootstrap Navbars page上测试

【讨论】：