reactjs 如何更改react-bootstrap的NavBarDropdown中选定项目的活动颜色?

soat7uwm  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(107)

我正在使用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;
}
sycxhyv7

sycxhyv71#

<NavDropdown>的ID为navbarScrollingDropdown,而<NavDropdown.Item>在被选中时会变为活动状态。另外,react-bootstrap如何呈现DOM,最终会得到以下HTML:

<div menuvariant="dark" class="nav-item show dropdown">
  <a aria-haspopup="true" aria-expanded="true" id="navbarScrollingDropdown" href="#" class="dropdown-toggle nav-link" role="button">3P-Verticals</a>
  <div aria-labelledby="navbarScrollingDropdown" class="dropdown-menu show" style="margin: 0px;">
    <a href="#action/3.1" class="dropdown-item">Action</a>
    <a href="#action/3.2" class="dropdown-item">Another action</a>
    <a href="#action/3.3" class="dropdown-item active">Something</a>
    <div class="dropdown-divider" role="separator"></div>
    <a href="#action/3.4" class="dropdown-item">Separated link</a>
  </div>
</div>

因此,即使您使用CSS选择器#navbarScrollingDropdown .active,它也不会工作,因为弹出菜单div位于ID为navbarScrollingDropdown的菜单项元素之外。
您可以覆盖Bootstrap使用的CSS选择器:

.dropdown-item.active,
.dropdown-item:active {
  background-color: green !important;
}

这是一个可以正常工作的CodeSandbox demo

相关问题