css - Material-UI 下拉列表在对话框中溢出

我正在尝试在 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

最佳答案

在您的自动完成中移除或设置disablePortal属性为false。如果你使用 portal在下拉列表中。下拉列表的真实 DOM 元素将附加到对话框层次结构之外(您可以使用检查元素来确认它),因此它的大小不受对话框布局的限制。

https://stackoverflow.com/questions/69418435/

相关文章:

c# - 如何在 dotnet 中将 ""解析为 long ("0")

reactjs - 路由在 webpack + react 项目中不起作用

list - Groovy:比较列表忽略其中元素的顺序

reactjs - 保存我的代码时 Eslint 配置错误

r - 根据 R 中表格的列数过滤列表

python - 使用 matplotlib 3.3+ 更改颜色条限制以更改比例

go - panic : errors: *target must be interface or

php - 我们在 PHP 数组中称这个符号 => 什么?

arrays - 当我尝试初始化 100 个元素的一维数组并使用指针填充它时出现段错误(核心已转储)

python - Pytorch 与转置之间的不同输出