Css 材质UI如何根据所选组件的宽度设置MenuItem（popover）的minWidth和maxWidth

确切地说，是府绸的宽度。无论菜单项的文本有多长，我都希望弹出框的宽度始终与选择组件的宽度相同。将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;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/OutlinedInput”导入OutlinedInput；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入Select；
const useStyles=makeStyles（主题=>({
根目录：{
显示：“flex”，
flexWrap:“wrap”，
},
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
}));
函数SimpleSelect（）{
const classes=useStyles（）；
const[values，setValues]=React.useState({
年龄：''，
});
const inputLabel=React.useRef（null）；
常量[labelWidth，setLabelWidth]=React.useState（0）；
React.useffect（（）=>{
setLabelWidth（inputLabel.current.offsetWidth）；
}, []);
函数句柄更改（事件）{
设置值（旧值=>({
…旧价值观，
[event.target.name]：event.target.value，
}));
}
返回(
年龄
没有一个
十
二十
三十
);
}
导出默认的SimpleSelect；

---

如何实现此目的？

您可以通过在菜单项上设置与表单控件宽度相同的显式宽度来实现此目的

以下是一个例子：

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;

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入MuiMenuItem；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入选择；
const selectWidth=150；
const useStyles=makeStyles（主题=>({
根目录：{
显示：“flex”，
柔性包装：“包装”
},
表单控制：{
边距：主题。间距（1），
宽度：选择宽度
},
选择空：{
marginTop：主题。间距（2）
}
}));
const useMenuItemStyles=makeStyles（主题=>({
菜单项：{
宽度：选择宽度
}
}));
功能菜单项（道具）{
常量类=useMenuItemStyles（道具）；
返回；
}
函数SimpleSelect（）{
const classes=useStyles（）；
const[values，setValues]=React.useState({
年龄：“
});
函数句柄更改（事件）{
设置值（旧值=>({
…旧价值观，
[event.target.name]：event.target.value
}));
}
返回(
年龄
没有一个
十
二十
三十
);
}
导出默认的SimpleSelect；

---

如果希望

选择的宽度根据最宽菜单项的宽度动态变化，则解决方案相当复杂。
菜单默认具有自动宽度和高度
菜单根据子列表项调整其宽度和高度

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

))
 检查CSS的calc（）函数是否有用。是否希望SelectInput width具有最宽菜单项的宽度？或者所有菜单项都有您为SelectInput设置的宽度？