React- Bootstrap NavDropDown - цвет фона, не заполняющий полное раскрывающееся меню, он оставляет верх и низ в качестве - PullRequest
0 голосов
/ 26 апреля 2020

Я пытаюсь изменить цвет фона раскрывающегося элемента div в реакции- bootstrap, но верхняя и нижняя часть раскрывающегося меню по-прежнему отображается белым (см. Изображение). Я пробовал кастом css, но он не работал. Любая помощь будет очень полезна Ссылка Codepen: https://codepen.io/vishalprasad2020/pen/QWjvQqd

React-Bootstrap NavDropdown background color issue

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

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020
.dropdown-menu { background-color: yellow; }

Демо

0 голосов
/ 26 апреля 2020

Если вы добавите это в файл css, ваша проблема будет решена. Я надеюсь, что смогу помочь.

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