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

Posted 2023-03-15

【中文标题】材质 UI：选择已折叠，自动宽度不起作用

【英文标题】：Material UI: Select is collapsed, autoWidth not working

【发布时间】：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 有关。

【参考方案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

中编辑此代码