时间戳

首页 > 解决方案 > 如何更改 React-Bootstrap NavDropdown 菜单背景颜色？

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

问题描述

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

React-Bootstrap NavDropdown 图片

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 浏览器开发者工具（之前）
之后：Chrome 浏览器开发者工具（之后）

Chrome 浏览器开发者工具（完整版）

标签： cssreactjstwitter-bootstrapuser-interfacereact-bootstrap

解决方案

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

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

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

导航下拉菜单

推荐阅读