使 NavItem 背景颜色与 NavBar 相同

Question

我希望我的 navitem 在点击或未点击时看起来像下图：

但是，点击后是这样的：

我尝试了多种方法来实现 navitem 标签的 css 属性以获得与其导航栏相似的背景，但都没有成功。下面是我的反应代码和相关的 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;
}

希望对您有所帮助。

使 NavItem 背景颜色与 NavBar 相同

Making NavItem Background color the same as NavBar

html

css

reactjs

react-bootstrap

react-router-bootstrap