MUI Select组件渲染致应用崩溃问题求助（已解决）

我正在开发一个带表单的模态框，打算用MUI的Select组件，但一打开模态框应用就崩溃；删掉这个Select组件后，应用就能正常运行了。找不到问题在哪，求帮忙。

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of MuiSelectIcon.

Booking.jsx #

Select组件代码 #

<Box>
  <InputLabel id="gender">Gender</InputLabel>
  <Select
    onChange={handleChange}
    id="gender-select"
    required
    native={false}
    labelId="gender"
    value={details?.gender ? details.gender : ""}
  >
    <MenuItem value="male">Male</MenuItem>
    <MenuItem value="female">Female</MenuItem>
    <MenuItem value="non-binary">Non-binary</MenuItem>
    <MenuItem value="Prefer not to specify">
      Prefer not to specify
    </MenuItem>
  </Select>
</Box>

导入语句： #

//...
import * as React from "react";
import TextField from "@mui/material/TextField";
import Modal from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Select from "@mui/material/Select";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Box from "@mui/system/Box";

预期效果 #

一个正常显示的MUI下拉选择组件，包含“Male”“Female”“Non-binary”“Prefer not to specify”几个性别选项。

解决方法 #

1. 用FormControl包裹Select组件：MUI的Select必须放在FormControl容器内，才能保证表单控件的上下文正确，避免渲染错误。修改后的代码如下：

<FormControl fullWidth>
  <InputLabel id="gender">Gender</InputLabel>
  <Select
    onChange={handleChange}
    id="gender-select"
    required
    native={false}
    labelId="gender"
    value={details?.gender ?? ""}
    label="Gender"
  >
    <MenuItem value="male">Male</MenuItem>
    <MenuItem value="female">Female</MenuItem>
    <MenuItem value="non-binary">Non-binary</MenuItem>
    <MenuItem value="Prefer not to specify">
      Prefer not to specify
    </MenuItem>
  </Select>
</FormControl>

2. 统一Box的导入来源：将Box的导入从@mui/system/Box改为@mui/material/Box，避免不同模块的组件上下文冲突：

import Box from "@mui/material/Box";

3. 校验MUI版本一致性：确保所有@mui/material相关依赖的版本完全一致，版本差异容易导致组件渲染异常。可以检查package.json中的版本号，统一后重新执行：

npm install

内容的提问来源于stack exchange，提问作者FRXGFA