Dark Dropdown items in React Bootstrap

user_13847690 0
Viewed 1164

I want to create a navbar for the header in my react application. I have used react-bootstrap dependencies for styling the components. Now I want to create a dark NavDropdown and on hovering #f0ad4e in my react application. I tried with the below approach but didn't work for it.

 <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>

The output of the above approach is shown below. Still, there is a white background at the top and bottom.

enter image description here

react-bootstrap reactjs css
2 Answers

Consider overriding the Bootstrap stylesheet

enter image description here

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

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

.nav-item .dropdown-item:hover {
  background: #f0ad4e;
}
user_86808050 
<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>

This renders as:
result

user_165708730
Related