材质 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
属性添加到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
中编辑此代码【讨论】:
以上是关于材质 UI:选择已折叠,自动宽度不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Popover 组件 - onExited 回调不起作用,材质 ui
Angular-ui-bootstrap 手风琴和折叠动画不起作用