如何更改 React-Bootstrap NavDropdown 菜单背景颜色？答案

【问题标题】：How to change React-Bootstrap NavDropdown menu background color?如何更改 React-Bootstrap NavDropdown 菜单背景颜色？
【发布时间】：2021-12-16 06:56:18
【问题描述】：

我在我的应用程序中使用react-bootstrap，我需要更改NavDropdown 组件菜单的背景颜色。我在我的反应应用程序中使用了模块化 css。我试过 background-color 但没有效果。

React-Bootstrap NavDropdown Image

Index.js:

<NavDropdown
    title={style.dropdownTitle}
    id={style.dropdownMenu}
    align="end"
>
    <NavDropdown.Item
        href="#action/3.1"
        className={style.dropdownItem}
    >
        Profile
    </NavDropdown.Item>
    <NavDropdown.Item
        href="#action/3.1"
        className={style.dropdownItem}
    >
        Learnings
    </NavDropdown.Item>
    <NavDropdown.Item
        href="#action/3.1"
        className={style.dropdownItem}
    >
        Logout
    </NavDropdown.Item>
</NavDropdown>

index.module.css:

#dropdownMenu {
  background-color: #002037;
  color: #e2dec0 !important;
  margin: 0px 10px;
}

.dropdownItem {
  font-size: 21px;
  color: #e2dec0 !important;
}

我尝试在浏览器的开发者工具中修改它
之前：Chrome Browser Developer Tools (BEFORE)
之后：Chrome Browser Developer Tools (AFTER)

Chrome Browser Developer Tools (Full)

【问题讨论】：

您是否检查过浏览器中的元素以查看应用了哪些样式？你的选择器匹配吗？它是否被某些东西覆盖了？我们很难提供帮助，但您很容易看到正在发生的事情。
其余的样式都被应用了吗？
@Woohaik 是的，除了背景颜色之外，其余的样式都在应用中。
是的，您需要检查元素并检查它的背景颜色 实际上 来自该元素。我怀疑还有其他一些元素实际上提供了背景
我更新了上面的问题。我使用浏览器的开发者工具添加了图片。

标签： css reactjs twitter-bootstrap user-interface react-bootstrap

【解决方案1】：

我现在添加了一个临时修复。我从 dropdownMenu 类中选择了下一个 div 元素，该元素指示在开发人员工具中找到的下拉菜单：

#dropdownMenu + div {
  background-color: #002037 !important;
}

.dropdownItem:hover {
  color: #002037 !important;
}

NavDropdown Menu

【讨论】：