材质 UI：选择已折叠，自动宽度不起作用答案

【问题标题】：Material UI: Select is collapsed, autoWidth not working材质 UI：选择已折叠，自动宽度不起作用
【发布时间】：2021-12-12 12:41:43
【问题描述】：

尽管autoWidth，Material UI (React) Select 项已折叠并且不会自动扩展宽度。

   <FormControl margin="dense">
          <InputLabel id="prefix-label">Prefix</InputLabel>
          <Select
           autoWidth
           labelId="prefix-label"
           id="prefix"
           disabled={formPrefix.disabled}
           value={formPrefix.value ?? ""}
           error={formPrefix.invalid}
           defaultValue={""}
           label="Prefix"
           onChange={handlePrefix}
          >
                 <MenuItem value={""} disabled>
                        Prefix
                 </MenuItem>
                 <MenuItem value={"US"}>US +1</MenuItem>
                 <MenuItem value={"else"}>Else</MenuItem>
          </Select>
          <FormHelperText></FormHelperText>
   </FormControl>

我在这里做错了吗？

【问题讨论】：

autoWidth 影响“弹出框”的宽度，并将根据菜单内的项目进行设置。它与您的Select的宽度无关@
@NizarZizoune 我明白了。为什么它会崩溃呢？占位符有问题吗？在我选择一个项目后，它会调整宽度。
我认为这与您的Select 的宽度有关，与您的布局/css 有关。

标签： javascript reactjs material-ui emotion

【解决方案1】：

您应该将width 属性添加到FormLabel 的sx 属性中，例如：

<FormControl margin="dense" sx={{ width: 100 }}>

您可以查看this sandbox 的实时工作示例。

【讨论】：

【解决方案2】：

在<FormControl> 组件上添加fullWidth 属性，而不是在<Select> 组件上。

你的 JSX 代码必须是这样的

<FormControl margin="dense" fullWidth>
  <InputLabel id="prefix-label">Prefix</InputLabel>
  <Select
    // autoWidth
    // fullWidth
    labelId="prefix-label"
    id="prefix"
    //  disabled={formPrefix.disabled}
    //  value={formPrefix.value ?? ""}
    //  error={formPrefix.invalid}
    defaultValue={""}
    label="Prefix"
    //  onChange={handlePrefix}
  >
    <MenuItem value={""} disabled>
      Prefix
    </MenuItem>
    <MenuItem value={"US"}>US +1</MenuItem>
    <MenuItem value={"else"}>Else</MenuItem>
  </Select>
  <FormHelperText></FormHelperText>
</FormControl>

在 CodeSandbox

中编辑此代码

【讨论】：