对话框中的 Material-UI 下拉菜单溢出

Question

我正在尝试在Dialog（模态）中使用下拉选择。但是，选项被模式的底部切断。 我怎样才能获得继续越过底部边框的选项？

我正在使用 MUI v5。

<Dialog open={open}>
  <DialogContent>
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={options}
      // getOptionLabel={(option) => option}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Numbers" />}
    />
  </DialogContent>
</Dialog>

（极端）示例：Code Sandbox

Answer 1

在您的Autocomplete 中删除或设置disablePortal 属性为false。如果您在下拉列表中使用portal。下拉菜单的真实 DOM 元素将附加到对话框层次结构之外（您可以使用检查元素来确认它），因此它的大小不受对话框布局的限制。