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来弄清楚如何定位正确的元素。在这种情况下，我们需要在ul.dropdown-menu内定位<NavBar>。因此，我们可以在该元素上添加className并相应地设置样式：

成分

<NavBar className="navBar">
...

样式表

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

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

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

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

1 个答案: