下面的代码使用以下方法：

• 通过MenuProps使用keepMounted prop，这样即使菜单没有显示，也会呈现出来。如果没有这个，就没有任何简单的方法来确定它的宽度（通常是最宽项的宽度，只要合适）。
• 向菜单的Paper元素的ref属性传递一个回调函数。这允许在paper元素被呈现到DOM时通知代码。
• 将纸张元素的宽度设置为状态，以用作Select的最小宽度

import * as React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";

export default function SelectAutoWidth() {
  const [age, setAge] = React.useState("");

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value);
  };
  const [minWidth, setMinWidth] = React.useState<number | null>(null);
  const menuCallbackRef = React.useCallback(
    (menuDiv: HTMLDivElement | null) => {
      if (menuDiv !== null) {
        if (minWidth === null || minWidth !== menuDiv.clientWidth) {
          setMinWidth(menuDiv.clientWidth);
        }
      }
    },
    []
  );

  return (
    <div>
      <FormControl sx={{ m: 1 }}>
        <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-autowidth-label"
          id="demo-simple-select-autowidth"
          value={age}
          sx={minWidth === null ? {} : { minWidth: minWidth + 14 }}
          MenuProps={{
            keepMounted: true,
            slotProps: { paper: { ref: menuCallbackRef } },
          }}
          onChange={handleChange}
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Twenty</MenuItem>
          <MenuItem value={21}>Twenty one</MenuItem>
          <MenuItem value={22}>Twenty one and a half</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

字符串
https://codesandbox.io/p/sandbox/select-width-based-on-options-73dj92?file=%2Fsrc%2FDemo.tsx%3A10%2C55
或者，您可以将TextField与select prop一起使用，然后由select prop负责渲染FormControl和InputLabel元素。下面是使用TextField而不是Select的等效代码：

import * as React from "react";
import MenuItem from "@mui/material/MenuItem";
import { SelectChangeEvent } from "@mui/material/Select";
import TextField from "@mui/material/TextField";

export default function SelectAutoWidth() {
  const [age, setAge] = React.useState("");

  const handleChange = (
    event: SelectChangeEvent<unknown>,
    child: React.ReactNode
  ) => {
    setAge(event.target.value as string);
  };
  const [minWidth, setMinWidth] = React.useState<number | null>(null);
  const menuCallbackRef = React.useCallback(
    (menuDiv: HTMLDivElement | null) => {
      if (menuDiv !== null) {
        if (minWidth === null || minWidth !== menuDiv.clientWidth) {
          setMinWidth(menuDiv.clientWidth);
        }
      }
    },
    []
  );

  return (
    <div>
      <TextField
        select
        sx={{ m: 1 }}
        label="Age"
        SelectProps={{
          onChange: handleChange,
          sx: minWidth === null ? {} : { minWidth: minWidth + 14 },
          MenuProps: {
            keepMounted: true,
            slotProps: { paper: { ref: menuCallbackRef } },
          },
        }}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Twenty</MenuItem>
        <MenuItem value={21}>Twenty one</MenuItem>
        <MenuItem value={22}>Twenty one and a half</MenuItem>
      </TextField>
    </div>
  );
}

型
https://codesandbox.io/p/sandbox/select-width-based-on-options-using-textfield-dqkk64?file=%2Fsrc%2FDemo.tsx%3A6%2C44的

你试过在textfield组件中添加fullWidth属性吗？试着指定一个你想要的宽度的容器，输入将占据它的容器的整个宽度。* 或 * 你可以使用文本内样式覆盖textfield的宽度。如下所示：

<TextField select style = {{width: 200}}>
        <MenuItem key="1" value="1">
          Small Choice
        </MenuItem>
        <MenuItem key="2" value="2">
          Biiiiiiiiiiiiiiiiiiiiiig Choice
        </MenuItem>
</TextField>

字符串
这个解决方案不是最好的，因为你必须根据菜单项静态地指定文本字段的最大宽度。