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

Question

我正在使用 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>

Answer 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（或类似库）也需要注意：由于自动命名空间，此样式需要包含在基本样式表中，不是一个将被导入到组件中并命名空间。

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

How to enable overflow for `react-bootstrap` NavDropdown

css

reactjs

react-bootstrap

css-modules