Változás a <a> elem osztály reagál-bootstrap NavItem

szavazat
1

Én próbálok dolgozni react-bootstrap, és módosítsa a NavItembelső <a>elem osztályban. Próbáltam használ className, de ez nem befolyásolja azt.

Meg akarom változtatni a színét a hoverfellépés. Hogy tudom megcsinálni?

<Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} href=#>1</NavItem>
        <NavItem eventKey={2} href=#>2</NavItem>
        <NavItem eventKey={3} href=# className=my-class>3</NavItem>
      </Nav>
</Navbar.Collapse>

css:

.xnavbar-tab a {
  color: #F89800;
}
A kérdést 04/12/2015 11:58
felhasználó
Más nyelveken...                            


3 válasz

szavazat
0

Nem hiszem, hogy ez lehetséges, nézi a forrás.

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/NavItem.js

Nézd linkProps objektumot. Nem tartalmaz className. Ez miért fontos? Mivel a horgony vesz a linkProps kifogást mint annak tulajdonságait. Így minden kulcsértékpárhoz belül linkProps végül válás prop a horgonyt. Ha className nincs jelen belül linkProps, ami a jelen esetben azt jelenti, hogy nincs mód, hogy akkor adja át kívülről NavItem.

 <SafeAnchor {...linkProps} aria-controls={ariaControls}>
      { children }
    </SafeAnchor>

További info: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/SafeAnchor.js

Megoldás :

Kezelése a css a horgony a NavItem alapján az osztály a NavItem.

 .nav-item.my-nav-item-class a{
    color : requiredcolor;
  }
Válaszolt 04/12/2015 12:28
a forrás felhasználó

szavazat
1

változtatni a horgony elem jön létre bootstrap-reagálni (például a bootstrap-reagálnak lapok) csak meg kell rendelni egy osztály a szülő és hagyjuk, hogy tudják, hogy a horgony gyermekek azokat alkalmazni, mint oly

.your-class > a
Válaszolt 09/07/2016 21:21
a forrás felhasználó

szavazat
0

Ha JSX megteheti, mint ez:

const css = `
        .hover-list a:hover {
        color: #F89800;
    }
`

<div className="hover-list">
    <Navbar.Collapse>
          <Nav pullRight>
            <NavItem eventKey={1} href="#">1</NavItem>
            <NavItem eventKey={2} href="#">2</NavItem>
            <NavItem eventKey={3} href="#" className="my-class">3</NavItem>
          </Nav>
    </Navbar.Collapse>
</div>
Válaszolt 17/05/2017 09:50
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more