如何禁用材质 ui 选择输入的自动增长？答案

【问题标题】：How do you disable the auto-grow on a material ui select input?如何禁用材质 ui 选择输入的自动增长？
【发布时间】：2020-05-14 18:13:27
【问题描述】：

我希望材质 UI 保持与选择项目之前相同的宽度。（实验室自动完成功能的工作原理）。

例如，如果您在这里选择第三个选项，它会增长，我该如何禁用它？

https://codesandbox.io/s/material-demo-i4ckf

相反，我希望它像自动完成一样，（选择指环王）

https://codesandbox.io/s/kcq04

【问题讨论】：

标签： material-ui

【解决方案1】：

不要使用minWidth，只需设置您需要的确切宽度：

formControl: {
  margin: theme.spacing(1),
  width: 120
}

【讨论】：

【解决方案2】：

你已经给出了 minWidth 属性，通常在 flex 布局中，如果没有像 maxWidth 或 flexGrow:0 这样的限制，那么它将占用尽可能多的空间你可以为它设置一个固定的宽度，如下所示还要添加文本溢出在下面添加必要的 css

formControl: {
  margin: theme.spacing(1),
  width: 120,
  // ellipsis overflow
  whiteSpace: "nowrap",
  overflow: "hidden",
  textOverflow: "ellipsis"

}

这是链接https://wsh90.csb.app/

德克尔指出的

编辑，溢出部分可能不是必需的

【讨论】：

没有理由在formControl上添加textOverflow，因为溢出的相关部分实际上是内部div（div.MuiSelect-select），它已经有textOverflow。
你可以查看我的答案。唯一需要的是设置宽度:)