react-bootstrap - 导航栏的自定义容器类？

Posted 2023-03-06

【中文标题】react-bootstrap - 导航栏的自定义容器类？

【英文标题】：react-bootstrap - custom container class for navbar?

【发布时间】：2017-05-31 12:02:33

【问题描述】：

我正在使用react-bootstrap 开发一个项目，我注意到Navbar 组件将导航栏的内容插入到container div 中，我想知道是否有任何方法可以覆盖它并提供自定义上课？

我看到你可以添加一个带有componentClass 属性的自定义元素，但是如果我添加它，那么我会丢失所有nav 样式。 componentClass="nav custom-class" 抛出错误。

【问题讨论】：

我也面临同样的挑战，你找到了优雅的解决方案吗？

不幸的是我现在不记得我最初问这个问题的原因了！我认为我没有解决它，也许只是暂时忍受了限制。

【参考方案1】：

尝试改用属性 bsClass，例如 bsClass='nav custom-class'。见参考here。

【讨论】：

感谢您的建议，但不幸的是，这只是将 nav custom-class 类添加到 nav 组件中。我希望 nav 组件保持原样，但它的直接子级：<div class="container"> 成为 <div class="custom-class">。

如果是这种情况，我能想到的唯一方法是在渲染时保存对 navbar 组件的引用，然后在 'componentDidMount' 方法中添加额外的类。

好的，我将把它保存为最后的手段，并希望有人提出不同的解决方案。感谢您的建议:-)

【参考方案2】：

最简单的方法是覆盖css，例如：

.navbar > .container 
    /* your stuff */