React 中来自 Material-UI 的可滚动列表组件

Question

如何使List组件（参见https://material-ui.com/components/lists/）固定大小且可滚动？每次我添加一个新的 ListItem 时，列表都会扩展，但是如果内容大于容器，我希望能够滚动它。

Answer 1

我刚刚发现您可以添加属性。 'maxHeight' 和 'overflow' 是我解决问题所需要的。例如，对于纸质容器中的列表：

<Paper style={{maxHeight: 200, overflow: 'auto'}}>
  <List>
   ...
  </List>
</Paper>

Answer 2

如果您希望列表填满容器的所有高度，此方法有效：

<List style={{maxHeight: '100%', overflow: 'auto'}} />

Scrollable List Component from Material-UI in React