如何修改React-Bootstrap中NavDropdown组件菜单的背景颜色

• 你给NavDropdown组件传递的id属性仅作用于下拉触发按钮，你需要修改的下拉菜单容器是独立的DOM节点，无法通过这个id匹配到
• CSS模块化方案会自动给你写的选择器添加唯一哈希后缀，你直接写的#dropdownMenu最终会被编译为带哈希的id，和页面上实际渲染的下拉菜单节点属性不匹配

1. 修改JSX代码 #

给NavDropdown新增menuProps属性，将自定义样式类传递给下拉菜单容器：

<NavDropdown
    title={style.dropdownTitle}
    id={style.dropdownMenu}
    align="end"
    menuProps={{ className: style.dropdownMenu }}
>
    <NavDropdown.Item
        href="#action/3.1"
        className={style.dropdownItem}
    >
        个人资料
    </NavDropdown.Item>
    <NavDropdown.Item
        href="#action/3.1"
        className={style.dropdownItem}
    >
        学习内容
    </NavDropdown.Item>
    <NavDropdown.Item
        href="#action/3.1"
        className={style.dropdownItem}
    >
        退出登录
    </NavDropdown.Item>
</NavDropdown>

2. 修改CSS模块化文件 #

把id选择器改为类选择器，可搭配全局类名提高样式优先级，不需要额外加!important也能生效：

.dropdownMenu:global(.dropdown-menu) {
  background-color: #002037;
  color: #e2dec0;
  margin: 0px 10px;
}

.dropdownItem {
  font-size: 21px;
  color: #e2dec0 !important;
}
/* 如需修改选项hover、选中状态的样式，可补充以下代码 */
.dropdownItem:hover, .dropdownItem:active {
  background-color: #003050;
  color: #e2dec0;
}

内容的提问来源于stack exchange，提问作者E to the I