Material UI展开选择以适合标签
Material UI展开选择以适合标签
提问于 2020-08-13 15:21:24
是否可以自动扩展Material-UI的Select输入以适应标签的大小？
官方演示将minWidth添加到formControl元素，但是我有许多输入，希望避免设置一系列硬编码的大小。当我删除这个minWidth字段时，标签会被压缩，如下面的演示所示，所需的输出是让标签和所需的星形整齐地放在minWidth元素中。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-13 21:57:40
您可以将InputLabel的min-width设置为max-content。
然后在render上，获取InputLabel的offsetWidth并将其设置为FormControl的min-width。
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const [labelWidth, setLabelWidth] = React.useState();
const label = React.useRef();
const handleChange = (event) => {
setAge(event.target.value);
};
React.useEffect(() => {
setLabelWidth(`${label.current.offsetWidth + 24}px`); // 24 for caret icon
}, [label]);
return (
<div>
<FormControl
required
className={classes.formControl}
style={{
minWidth: labelWidth
}}
>
<InputLabel
id="demo-simple-select-required-label"
style={{ minWidth: "max-content" }}
ref={label}
>
The label
</InputLabel>
<Select
value={age}
onChange={handleChange}
className={classes.selectEmpty}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>An option</MenuItem>
</Select>
</FormControl>
</div>
);
}
PS:你可能已经知道了，但我仍然想提一下，FormControl接受fullWidth属性，当设置为true时，它将占据容器的整个宽度。
Stack Overflow用户
发布于 2020-10-10 13:55:59
大量使用了bertdida的答案，我最终选择了下面的答案，并使用了Select。更改select本身的宽度似乎效果最好。
export default function SelectAutoWidth( props ) {
const [labelWidth, setLabelWidth] = React.useState();
const labelRef = React.createRef();
React.useEffect(() => {
setLabelWidth(`${labelRef.current.offsetWidth + 24}px`); // 24 for caret icon
}, [labelRef]);
return (
<FormControl
required={props.required}>
<InputLabel ref={labelRef}>{props.label}</InputLabel>
<Select
style={{
minWidth: labelWidth
}}
value={props.value}
multiple={props.multiple}
input={props.input}
onChange={props.onChange}
renderValue={props.renderValue}
>
{props.children}
</Select>
</FormControl>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63390055
复制相关文章
相似问题
腾讯云开发者
