Material-UI 将 <Select> 设置为与最宽的 <MenuItem> 一样宽？

Question

我正在尝试将 Mui Select 字段设置为与最大的 MenuItem 一样宽。我尝试过autoWidth在 Select 上使用 prop，但这似乎没有改变任何东西。这是一个显示问题的代码沙箱（我还包含了一个 TextField 实现，它对我来说也有同样的问题）；

https://codesandbox.io/s/mui-select-width-issue-xmsp5?file=/src/App.js

在这两个项目之间进行选择时，选择框的宽度将会改变。如何以编程方式将其修复为最大 MenuItem 的宽度？谢谢

Answer 1

您是否尝试过fullWidth在文本字段组件中添加属性？尝试指定所需宽度的容器，输入将占据其容器的整个宽度。或者您可以使用文本样式覆盖文本字段的宽度。如下：

<TextField select style = {{width: 200}}>
        <MenuItem key="1" value="1">
          Small Choice
        </MenuItem>
        <MenuItem key="2" value="2">
          Biiiiiiiiiiiiiiiiiiiiiig Choice
        </MenuItem>
</TextField>

这个解决方案不是最好的，因为您必须根据菜单项静态指定文本字段的最大宽度。