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

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

标签： cssreactjsreact-bootstrap

Answer 1

考虑覆盖 Bootstrap 样式表

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

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

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