React Bootstrap，为 NavItems 添加悬停效果

Question

全新的 React Bootstrap，我一直在尝试为组件添加一些自定义样式。

我能够通过使用 chrome 检查器查找类名来从 Nav 中删除边框半径，但是我无法为我的 NavItems 添加悬停效果。

这是我的组件。

 <Navbar inverse collapseOnSelect className="nav-bar">
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">efrt</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Features</NavItem>
        <NavItem eventKey={2} href="#">Who we Are</NavItem>
      </Nav>
      <Navbar.Form pullRight>
        <UniversalButton style="primary" name='Login' />
      </Navbar.Form>
      <Nav pullRight>
        <NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
          <MenuItem eventKey={3.3}>Member</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Coach</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

从 Chrome 检查器复制，我得到以下作为我想要进行更改的类/元素

.navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d;
} 

当我尝试以下操作时，没有任何反应。我尝试添加自定义类名也没有效果。

.navbar-inverse.navbar-nav>li>a:hover {
    background: grey;
} 

任何帮助表示赞赏:)！

Answer 1

.navbar-inverseas .navbar-navis a child 后面缺少一个空格：

.navbar-inverse .navbar-nav > li > a:hover {
  background-color: gray;
}

运行示例：

.navbar-inverse .navbar-nav > li > a:hover {
  background-color: gray;
}

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

class App extends React.Component {
  render() {
    return (
      <div>
        <Navbar inverse collapseOnSelect className="nav-bar">
          <Navbar.Header>
            <Navbar.Brand>
              <a href="#">efrt</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <NavItem eventKey={1} href="#">
                Features
              </NavItem>
              <NavItem eventKey={2} href="#">
                Who we Are
              </NavItem>
            </Nav>
            <Navbar.Form pullRight />
            <Nav pullRight>
              <NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
                <MenuItem eventKey={3.3}>Member</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.3}>Coach</MenuItem>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));