React Bootstrap 中的深色下拉菜单项

Question

我想为我的反应应用程序中的标题创建一个navbar。我使用 react-bootstrap 依赖项来设置组件的样式。现在我想在我的反应应用程序中创建一个黑暗的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>

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

Answer 1

<Navbar collapseOnSelect expand="lg" bg="white" fixed="top">
        <Container>
        <Navbar.Brand href="#home"><img className="logo mb-2" src={image4}  /></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="ms-auto text-center">
            <Nav.Link href="#features">Home</Nav.Link>
            <Nav.Link href="#features">About</Nav.Link>
            <Nav.Link href="#pricing">Services</Nav.Link>
            <Dropdown as={NavItem}>
              <Dropdown.Toggle as={NavLink}>Courses</Dropdown.Toggle>
              <Dropdown.Menu variant="dark">
                <Dropdown.Item href="#action/3.1">PROFESSIONAL CHEF</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">COOKING</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">FASHION DESIGNING</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">HOUSE KEEPING</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">FNB SERVICE</Dropdown.Item>
                <Dropdown.Item href="#action/3.1">BEAUTIFICATION</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
            <Nav.Link href="#pricing">Blog</Nav.Link>
            <Nav.Link href="#pricing">Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
        </Container>
      </Navbar>

这呈现为：

Answer 2

考虑覆盖 Bootstrap 样式表

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

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

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