Question

是否可以自动扩展Material-UI的Select输入以适合标签的大小？

官方演示将minWidth添加到formControl元素，但是我有很多输入，并且希望避免设置一系列硬编码的大小。当我删除此minWidth字段时，标签将如以下演示中所示那样被压缩，所需的输出是将标签和所需的星形整齐地放置在Select元素内。

https://codesandbox.io/s/material-demo-forked-x4m3x

Answer 1

您可以将InputLabel的{{1}}设置为max-content。

然后在渲染中获取min-width的{{1}}，并将其设置为InputLabel的{{1}}。

offsetWidth

PS：您可能已经知道，但是我仍然要提到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> ); }时，它将占用其容器的整个宽度

Answer 2

我大量使用bertdida的答案，最终选择了以下内容，并使用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>
    );
}

材质UI展开选择以适合标签

2 个答案: