React Bootstrap中的Dark Dropdown项目

问题描述

我想为我的react应用程序中的标题创建一个navbar。我已经使用react-bootstrap依赖项来设计组件的样式。现在，我想在我的react应用程序中创建一个深色的NavDropdown并将鼠标悬停在#f0ad4e上。我尝试了以下方法，但没有用。

 <Nav className="mr-auto">
    <Nav.Link href="#features">Home</Nav.Link>
    <NavDropdown title="Inventory">
      <NavDropdown.Item
        href="#action/3.1"
        style={{ backgroundColor: "black",color: 'white' }}
      >
        Products List
      </NavDropdown.Item>
      <NavDropdown.Item
        href="#action/3.2"
        style={{ backgroundColor: "black",color: 'white' }}
      >
        Top View Products
      </NavDropdown.Item>
      <NavDropdown.Item
        href="#action/3.3"
        style={{ backgroundColor: "black",color: 'white' }}
      >
        Add Products
      </NavDropdown.Item>
    </NavDropdown>
  </Nav>

以上方法的输出如下所示。尽管如此，顶部和底部还是白色背景。

解决方法

考虑覆盖Bootstrap样式表

.nav-item .dropdown-menu {
  background: #000000;
}

.nav-item .dropdown-item {
  color: #ffffff;
}

.nav-item .dropdown-item:hover {
  background: #f0ad4e;
}