在 MUI TextField 选择中定位选项菜单

Question

我正在使用带有 select 属性的 MUI TextField 组件，并且无法将选项菜单定位在输入字段下方（菜单在打开时覆盖输入字段）。这种情况也会发生在 MUI 自己的沙箱中：

https://codesandbox。 io/s/9oqjs?file=/demo.js:1442-1496

在沙盒中，在左侧的所有示例中，菜单涵盖了输入字段。在右侧的示例中不会发生这种情况，因为这些示例使用本机 select html 标记，但这是以使用浏览器菜单为代价的。

知道如何在没有本机选择的情况下正确定位菜单吗？

非常感谢！

Answer 1

它看起来像 的位置在 Material-ui 下组件可以回答你的问题。

我还发现，如果菜单项列表太长而无法容纳在文本字段下，则菜单将在文本字段上垂直扩展以容纳该列表。在菜单中添加最大高度可以解决这个问题。

  <TextField
    ...
    select={true}

    SelectProps={{
      MenuProps: {
        sx: { maxHeight: '50%' }
      }
    }}
  >