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

Posted

技术标签:

【中文标题】材质 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 属性添加到FormLabelsx 属性中,例如:

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

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

【讨论】:

【参考方案2】:

&lt;FormControl&gt; 组件上添加fullWidth 属性,而不是在&lt;Select&gt; 组件上。

你的 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

中编辑此代码

【讨论】:

以上是关于材质 UI:选择已折叠,自动宽度不起作用的主要内容,如果未能解决你的问题,请参考以下文章

反应材质 UI 选择框 onBlur 事件不起作用

材质 UI 凸起按钮不起作用

Popover 组件 - onExited 回调不起作用,材质 ui

Angular-ui-bootstrap 手风琴和折叠动画不起作用

Material Ui DataGrid IsRowSelectable 在 React ts 中不起作用

覆盖 Material-UI 样式不起作用