Search code examples
cssreactjsreact-bootstrap

Dark Dropdown items in React Bootstrap

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

Solution

  • 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;
}