如何在React Bootstrap上自定义组件

Question

我正在尝试使用React Bootstrap并想要更改自定义导航。我做这样的事情。

const navInstance = (
    <Nav bsStyle='pills'>
        <NavItem eventKey={1} href='/home'>NavItem 1 content</NavItem>
    </Nav>
);

React.render(navInstance, document.querySelector('.container'));

有关如何更改颜色的任何想法？另外，如何将导航设置到顶部，这样当页面滚动时，导航保持固定？

Answer 1

我相信你错过了Navbar组件作为父组件。您的组件应如下所示：

<Navbar fixedTop>
    <Nav>
        <NavItem eventKey={1} href='#'>Link</NavItem>
        <NavItem eventKey={2} href='#'>Link</NavItem>
    </Nav>
</Navbar>

fixedTop prop将通过从bootstrap.css添加适当的类来保持固定。改变颜色将是对css类的重写，你应该好好去。