React-Bootstrap NavDropDown是背景色，未填充完整的下拉菜单，它使顶部和底部呈白色

Question

我正在尝试在react-bootstrap中更改下拉div的背景颜色，但是下拉菜单的顶部和底部仍显示为白色（请参见图像）。我尝试了自定义CSS，但是没有用。任何帮助都会有很大帮助Codepen链接：https://codepen.io/vishalprasad2020/pen/QWjvQqd

const {
  Navbar,
  Nav,
  NavItem,
  NavDropdown,
  MenuItem
} = ReactBootstrap;

class NavbarInstance extends React.Component {
  render() {
    return (
      <Navbar id="basic-nav-dropdown1">
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
          </Navbar.Brand>
        </Navbar.Header>
        <Nav>
          <NavItem eventKey={1} href="#">Link</NavItem>
          <NavItem eventKey={2} href="#">Link</NavItem>
          <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
            <MenuItem id="basic-nav-dropdown1" eventKey={3.1}>Action</MenuItem>
            <MenuItem id="basic-nav-dropdown1" eventKey={3.2}>Another action</MenuItem>
            <MenuItem id="basic-nav-dropdown1" eventKey={3.3}>Something else here</MenuItem>
            <MenuItem id="basic-nav-dropdown1" eventKey={3.3}>Separated link</MenuItem>
          </NavDropdown>
        </Nav>
      </Navbar>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <NavbarInstance></NavbarInstance>
    );
  }
}

ReactDOM.render(<App />, document.body);

#basic-nav-dropdown{
  background-color:yellow;
}
#basic-nav-dropdown1{
  background-color:yellow;
}
body{
  background-color:yellow;
}

Answer 1

如果将其添加到CSS文件中，则将解决您的问题。希望我能帮上忙。

   ul.dropdown-menu {
     padding: 0px 0px;
   }

Answer 2

.dropdown-menu { background-color: yellow; }

Demo