Material UI (React) Select 專案被折疊并且不會自動擴展寬度，盡管autoWidth.
<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>
我在這里做錯了嗎？
uj5u.com熱心網友回復：
您應該將width屬性添加到類似的sx道具中FormLabel：
<FormControl margin="dense" sx={{ width: 100 }}>
您可以查看此沙箱的實時作業示例。
uj5u.com熱心網友回復：
fullWidth在<FormControl>組件上而不是在組件上添加道具<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 中編輯此代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338464.html
標籤：javascript 反应 材质-ui 情感