Change the element class in react-bootstrap Na

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

I dont think that's possible, looking at the source.

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

Look at linkProps object. It does not contain className. Why is this important? Because, the anchor is taking the linkProps object as its properties. So each key-value pair within linkProps ends up becoming a prop to the anchor. If className is not present within linkProps, which is the case here, it means that there is no way that you can pass it from outside NavItem.

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

More info : https://github.com/react-bootstrap/react-bootstrap/blob/master/src/SafeAnchor.js

Solution:

Manage the css of the anchor within the NavItem, based on the class of the NavItem.

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

Answer 2

to change the anchor element that is created with bootstrap-react (for example in bootstrap-react tabs) you just need to assign a class to the parent and let it know that its anchor children should have them applied like so

.your-class > a

Answer 3

If you use JSX you can do it like this:

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>