Создание цвета фона NavItem таким же, как у NavBar

Question

Я хочу, чтобы мой navitem выглядел так, как показано ниже, при нажатии или отсутствии нажатия:

Однако при нажатии это выглядит так:

Я пробовал многочисленные способы реализации свойств css тега navitem, чтобы получить фон, похожий на его панель навигации, но безуспешно. Ниже приведен мой код реакции и связанная с ним реализация CSS:

//React Code:

      <div className="App">
        <Navbar fluid collapseOnSelect fixedTop>
          <Navbar.Header>
            <Navbar.Brand>
             <img src={store_logo} alt="logo" height="70" width="75"/>
              <Link to="/"><p>StoreName</p></Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {this.state.isAuthenticated
                ? <Fragment>
                    <LinkContainer to="/settings">
                      <NavItem>Settings</NavItem>
                    </LinkContainer>
                    <NavItem onClick={this.handleLogout}>Logout</NavItem>
                  </Fragment>
                : <Fragment>
                    <IndexLinkContainer exact to="/about">
                    <NavItem eventKey={1}>About</NavItem>
                    </IndexLinkContainer>
                    <LinkContainer to="/contact">
                      <NavItem eventKey={2}>Contact</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/blog">
                      <NavItem>Blog</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </Fragment>
              }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        </div>

//CSS Code:

.App .navbar-brand,
.App .navbar-brand p {
  color: black;
  font-weight: bold;
}

.App .nav {
  font-weight: bold;
  padding-top: 30px;
}

.navbar-default .navbar-nav > li > a {
     color: black;
     background-color: yellow;
     border-color: green;
     background-image: none;
   }

.App nav.navbar.navbar-default.navbar-fixed-top {
    border-color: green;
    background-color: yellow;
    height: 120px;
    color: black;
}

Любая идея о том, что я могу делать не так / помощь будет точной. Спасибо

Answer 1

Когда вы используете CSS-фреймворк и хотите переопределить стиль, вам необходимо переопределить исходные стили, предоставляемые фреймворком.

Если вы посмотрите на оригинальный CSS (поиск.navbar-default .navbar-navnavbar-nav), вы можете увидеть

.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

Чтобы переопределить все это, вы можете поставить

.navbar-default .navbar-nav,
.navbar-default .navbar-nav > li > a {
  color: black;
  background-color: yellow;
  border-color: green;
  background-image: none;
}

Надеюсь это поможет.