React Bootstrap, Adding Hover Effects to NavItems

Question

Brand new to React Bootstrap and I have been trying to add some custom styling to components.

I was able to remove the border radius from the Nav by using chrome inspector to find the classname, but I haven't been able to do the same for adding hover effects to my NavItems.

Here is my component.

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

Copied over from Chrome inspector, I get the following as the class/elements where I want to make changes

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

When I try the following nothing happens. I tried adding custom class names with no effect either.

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

Any help appreciated :)!

Solution

You are missing a space after .navbar-inverse as .navbar-nav is a child:

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

Running example:

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"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<style>
  .navbar-inverse .navbar-nav>li>a:hover {
    background-color: green;
  }
</style>
<div id="root"></div>

Comments

[hancho]

Awesome, I got that to work. However, I am wondering why it is not updating if I put that in my rails stylesheets folder.. These changes only went through when I added the style tag to the root view.

[Sagiv b.g]

did you check the order of files loaded? maybe you loaded your custom css before bootstrap.css and this will make bootstrap override your rules. Or maybe you are using something like css-modules or other css loader that changes your css classes (like adding a hash to them) and basically you are not realy overriding bootstrap's classes.