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

Posted 2023-03-23

【中文标题】无法在 Reactstrap Navbar 组件中使用 Bootstrap 类

【英文标题】：Unable to use Bootstrap classes in Reactstrap Navbar component

【发布时间】：2017-12-29 07:38:56

【问题描述】：

我在 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-inverse、navbar-faded 等，但对于像我这样的自定义类则没有。有什么建议吗？

【参考方案1】：

只需将className 的值放入 ... ，如下所示：

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