更改 react-bootstrap NavItem 中的 <a> 元素类答案

【问题标题】：Change the <a> element class in react-bootstrap NavItem更改 react-bootstrap NavItem 中的 <a> 元素类
【发布时间】：2015-12-04 13:58:21
【问题描述】：

我正在尝试使用 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;
}

【问题讨论】：

请添加更多代码和行为。您如何在悬停时添加/删除类？
我在 css 文件中添加了:hover 动作，但即使只是更改颜色也无济于事

标签： twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

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

.your-class > a

【讨论】：

【解决方案2】：

我不认为这是可能的，查看源代码。

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

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

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

解决方案：

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

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

【讨论】：

这个问题我遇到过好几次了，是不是有点局限？假设我想更改一些字体和类...
其实没有，我看不出有什么理由给锚元素添加一个类，因为你确实有能力给父元素添加一个类，并且肯定能够基于它改变样式。
在当前上下文中，您有一个 NavItem 组件，我认为该组件已经实现了相当程度的抽象，同时暴露了改变其行为所需的道具。
请查看我编辑的问题。还是不行

【解决方案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>

【讨论】：