<a>在react-bootstrap NavItem中</a>更改<a>元素类</a>

Question

我正在尝试使用react-bootstrap并更改NavItem内部<a>元素的类。 我尝试使用className但没有影响它。

我想更改hover动作的颜色。 我该怎么做？

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

Answer 1

要更改用bootstrap-react创建的锚元素（例如，在bootstrap-react选项卡中），您只需将一个类分配给父对象，让它知道其锚定子对象应该像这样应用它们

.your-class > a

Answer 2

从源头上看，我认为这是不可能的。

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

查看linkProps对象。 它不包含className。 为什么这很重要？ 因为，锚点将linkProps对象作为其属性。 因此，linkProps中的每个键值对最终都成为锚点的支撑。 如果classProname在linkProps中不存在（在这种情况下），则意味着您无法从NavItem外部传递它。

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

更多信息： https : //github.com/react-bootstrap/react-bootstrap/blob/master/src/SafeAnchor.js

解决方案 ：

根据NavItem的类，管理NavItem中锚点的css。

 .nav-item.my-nav-item-class a{
    color : requiredcolor;
  }

Answer 3

如果您使用JSX，则可以这样做：

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>