Réagissez Bootstrap, Ajout d'effets Hover à NavItems

Question

Tout nouveau à React Bootstrap et j'ai essayé d'ajouter un style personnalisé aux composants. J'ai pu supprimer le rayon de la bordure de la Nav en utilisant l'inspecteur de chrome pour trouver le nom de la classe, mais je n'ai pas pu faire la même chose pour ajouter des effets de survol à mes NavItems.

Voici mon composant.

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

Copié au-dessus de l'inspecteur Chrome, je reçois ce qui suit comme la classe/éléments où je veux apporter des modifications

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

Lorsque je tente rien suivant arrive. J'ai essayé d'ajouter des noms de classe personnalisés sans effet non plus.

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

Toute aide appréciée :)!

Answer 1

Il vous manque un espace après .navbar-inverse comme .navbar-nav est un enfant:

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

exemple Exécution:

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>