无法在Reactstrap Navbar组件中使用Bootstrap类

时间:2017-07-23 18:11:43

标签: bootstrap-4 reactstrap

我在Node应用程序上使用Bootstrap 4的Reactstrap实现,并尝试使用以下JSX渲染导航栏组件:

return (
    <Navbar color="inverse" inverse toggleable={`md`} fixed={`top`} className="h-50">
      <NavbarToggler right onClick={this.toggle} />
      <NavbarBrand href="/">reactstrap</NavbarBrand>
      <Collapse isOpen={this.state.isOpen} navbar>
        <Nav className="ml-auto" navbar>
          <NavItem>
            <NavLink href="/components/">Components</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
          </NavItem>
        </Nav>
      </Collapse>
    </Navbar>
);

但是当组件呈现时,它会完全跳过我添加的类(h-50):

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">...</nav>

Reactstrap documentation提供了一个道具列表,可以用于大多数常规道具,例如navbar-inversenavbar-faded等,但不包括我所拥有的自定义类。有什么建议吗?

1 个答案:

答案 0 :(得分:2)

只需将className的值放入{ ... },就像这样:

<Navbar color="inverse" inverse toggleable={`md`} fixed={`top`}
className={"h-50"}>
  ...
</Navbar>