Question

I am trying to work with react-bootstrap and change the NavItem inner <a> element's class. I tried using className but it didn't affect it.

I want to change the colour of the hover action. How can I do it?

<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中的每个键值对最终成为锚点的支柱。如果linkProps中没有className，这就是这里的情况，这意味着你无法从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，您可以这样做：

import {Component, OnInit, ElementRef} from '@angular/core';
import {TableData} from './table-data';
declare var $:any;

@Component({
  templateUrl: 'Home.component.html'
})
export class HomeComponent implements OnInit {

  datas: Array<any> = TableData;
  constructor(private _elRef: ElementRef) {}

  ngOnInit() {
    jQuery(this._elRef.nativeElement).find('#dtb').DataTable();
  }
}

更改<a> element class in react-bootstrap NavItem

3 个答案: