Material-UI如何根据选择组件的宽度设置MenuItem（弹出窗口）的minWidth和maxWidth？

Question

确切来说，是弹出窗口的宽度。无论菜单项文本有多长，我希望弹出窗口的宽度始终与选择组件相同。将autoWidth设置为true或false都没有帮助。

以下是选择组件的代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    age: '',
  });

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value,
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
          Age
        </InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          input={<OutlinedInput labelWidth={labelWidth} name="age" id="outlined-age-simple" />}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

export default SimpleSelect;

我该如何实现这个目标？

- Bens

---

检查CSS的calc()函数是否有帮助。 - Codesigner

你想让SelectInput的宽度与最宽的MenuItem相同吗？还是所有的MenuItems都有你为SelectInput固定的宽度？ - AxelJunes

Answer 1

你可以通过将菜单项的宽度设置为与表单控件相同的显式宽度来实现此目的。

以下是一个示例：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MuiMenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const selectWidth = 150;

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    width: selectWidth
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

const useMenuItemStyles = makeStyles(theme => ({
  menuItem: {
    width: selectWidth
  }
}));

function MenuItem(props) {
  const classes = useMenuItemStyles(props);
  return <MuiMenuItem className={classes.menuItem} {...props} />;
}

function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    age: ""
  });

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

export default SimpleSelect;

如果你想让Select组件的宽度基于最宽菜单项的宽度动态调整，那么解决方案会比较复杂。你可以参考这个示例代码。

- Ryan Cogswell

Answer 2

菜单默认具有自动宽度和高度， 根据子列表项调整菜单的宽度和高度

const useStyles = makeStyles((theme: Theme) =>
createStyles({
    listItem:{
        maxWidth:150,
        minWidth:100,
        padding: theme.spacing(2)
    }
}),

);

- Muhammad Muzamil