我正在使用here中的react-bootstrap Navdropdown组件。我已经正确使用了它,但是当它处于正常和活动状态时,我无法设置navdropdow-items的自定义背景颜色。
喜欢我想从blue
更改为任何其他颜色时,选择选项,如image.
所示
我该怎么做呢?(如果 Bootstrap 中没有内置的类/属性,即使使用css也会有帮助).
导航栏.js
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="/master">Hi {user.sub}</Navbar.Brand>
<Nav className="me-auto">
.
.
.
.
.
.
<NavDropdown drop="down-centered" menuVariant="dark" title="3P-Verticals" id="navbarScrollingDropdown">
{
verticals_3p.map((item)=> {
return(
<NavDropdown.Item key={item.val}>
<Nav.Link onClick={()=>props.setTenantName(item.val)}>{item.label}</Nav.Link>
</NavDropdown.Item>
)
})
}
</NavDropdown>
.
.
.
.
.
.
</Nav>
</Container>
</Navbar>
我在App.css
中尝试了这个,但是它不工作。
#navbarScrollingDropdown:active {
font-weight: bold;
}
1条答案
按热度按时间sycxhyv71#
<NavDropdown>
的ID为navbarScrollingDropdown
,而<NavDropdown.Item>
在被选中时会变为活动状态。另外,react-bootstrap如何呈现DOM,最终会得到以下HTML:因此,即使您使用CSS选择器
#navbarScrollingDropdown .active
,它也不会工作,因为弹出菜单div位于ID为navbarScrollingDropdown
的菜单项元素之外。您可以覆盖Bootstrap使用的CSS选择器:
这是一个可以正常工作的CodeSandbox demo。