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

Posted 2023-03-06

【中文标题】如何更改 React-Bootstrap NavDropdown 菜单背景颜色？

【英文标题】：How to change React-Bootstrap NavDropdown menu background color?

【发布时间】：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 是的，除了背景颜色之外，其余的样式都在应用中。

是的，您需要检查元素并检查它的背景颜色 实际上 来自该元素。我怀疑还有其他一些元素实际上提供了背景

我更新了上面的问题。我使用浏览器的开发者工具添加了图片。

【参考方案1】：

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

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


.dropdownItem:hover 
  color: #002037 !important;

NavDropdown Menu