问Material UI展开选择以适合标签

EN

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>
  );
}

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>
    );
}