html - 使 NavItem 背景颜色与 NavBar 相同

Question

我希望我的 navitem 在单击或未单击时看起来如下图所示:

但是，点击的时候是这样的:

我尝试了多种方法来实现 navitem 标签的 css 属性以获得与其导航栏相似的背景，但都没有成功。下面是我的 react 代码和相关的 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框架时，想要重新定义一个样式，你需要重写框架提供的原有样式。

如果您查看 original 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;
}

希望这对您有所帮助。