如何为 `react-bootstrap` NavDropdown 启用溢出答案

【问题标题】：How to enable overflow for `react-bootstrap` NavDropdown如何为 `react-bootstrap` NavDropdown 启用溢出
【发布时间】：2018-07-19 16:50:21
【问题描述】：

我使用react-bootstrap 的 NavDropdown 作为 NavBar 的一部分来显示数据列表。有时列表比视图的其余部分长，切断了列表的底部。我需要能够将overflow: auto 添加到列表中，但不知道该怎么做。将 NavDropdown 或其中的项目包装在样式化的 div 中会破坏 react-bootstrap 的样式。尝试直接设置 NavDropdown 样式（通过className 或style）会破坏react-bootstrap 的样式。有人能解决这个问题吗？

代码大致如下：

<NavBar>
  <NavBar.Collapse>
    <Nav>
      <NavDropdown>
        lots of <MenuItem />
      </NavDropdown>
    </Nav>
  </NavBar.Collapse>
</NavBar>

【问题讨论】：

标签： css reactjs react-bootstrap css-modules

【解决方案1】：

关键是比 React 元素更深入地观察，并考虑渲染的 html/css 以确定如何定位正确的元素。在这种情况下，我们需要在<NavBar> 内定位ul.dropdown-menu。所以我们可以在那个元素上加上一个className 并相应地设置样式：

组件

<NavBar className="navBar">
...

样式表

.navBar ul.dropdown-menu {
  max-height: 90vh;
  overflow-y: auto;
}

max-height 当然可以是适合所需 UI 的任何内容。

如果使用css-modules（或类似库），还需要注意：由于自动命名空间，此样式需要包含在基本样式表中，不是将导入到组件和命名空间。

【讨论】：