如何修改react-bootstrap中NavBarDropdown选中项的激活颜色？

我正在使用react-bootstrap的NavDropdown组件，组件可正常使用，但无法设置NavDropdown.Item在正常状态及选中（激活）状态下的自定义背景色。我希望将选中选项的默认蓝色改为其他颜色，求实现方法，用CSS修改也行，只要Bootstrap没有内置的类/属性可实现此功能。

我的Navbar.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：结合状态管理+自定义类（精准控制选中项） #

1. 在组件内新增状态，跟踪当前选中的租户：

import { useState } from 'react';

// ... 其他代码
const [activeTenant, setActiveTenant] = useState('');

2. 渲染下拉项时，给当前选中的项添加active属性和自定义类：

<NavDropdown.Item 
  key={item.val} 
  active={item.val === activeTenant}
  className="custom-dropdown-item"
>
  <Nav.Link onClick={()=>{
    props.setTenantName(item.val);
    setActiveTenant(item.val); // 更新选中状态
  }}>
    {item.label}
  </Nav.Link>
</NavDropdown.Item>

3. 在CSS中编写自定义样式覆盖默认效果：

/* 下拉项正常状态 */
.custom-dropdown-item {
  background-color: #2c3034; /* 替换成你需要的正常状态颜色 */
  color: #fff;
}

/* 下拉项选中（激活）状态 */
.custom-dropdown-item.active {
  background-color: #5a6268 !important; /* 替换成你需要的选中颜色，!important确保覆盖Bootstrap默认样式 */
  color: #fff;
}

方法2：直接覆盖Bootstrap全局样式 #

如果不需要精准控制单个项，直接全局修改下拉项的样式：

/* 全局下拉项正常状态 */
.dropdown-item {
  background-color: #2c3034;
}

/* 全局下拉项激活/选中状态 */
.dropdown-item.active, .dropdown-item:active {
  background-color: #5a6268 !important;
  color: #fff;
}

/* 针对暗色菜单的样式（对应你的menuVariant="dark"） */
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  background-color: #5a6268;
}

你之前样式不生效的原因 #

你写的选择器#navbarScrollingDropdown:active是针对下拉菜单的触发按钮，而非下拉面板里的选项，自然不会作用到你想要修改的下拉项上，需要针对.dropdown-item类或者自定义类编写样式。

内容的提问来源于stack exchange，提问作者MagnusEffect