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

Question

我正在使用 react-bootstrap 的 NavDropdown 作为 NavBar 的一部分来显示数据列表。有时列表比 View 的其余部分长，切断了列表的底部。我需要能够将 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 以确定如何定位正确的元素。在这种情况下，我们需要定位 ul.dropdown-menu在 <NavBar> 内.所以我们可以放一个className在该元素和相应的样式上:

组件

<NavBar className="navBar">
...

样式表

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

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

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