Material UI React动态创建Select选项失败，求可行解决方案

你的代码里存在几个直接导致失败的问题，先逐一修正并给出可行实现：

• 未导入OutlinedInput组件，需补充导入
• size={size}中的size变量未定义，需指定有效值（如"small"或"medium"）
• getStyles函数未定义，若不需要自定义选中样式可直接移除，或补充实现
• 若为单选Select，状态personName初始值不应设为数组；若需多选，需给Select添加multiple属性

单选场景实现 #

import React from "react";
import { useTheme } from "@mui/material/styles";
import ReactDOM from "react-dom";
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";
import OutlinedInput from "@mui/material/OutlinedInput"; // 补充导入

const ageOptions = ["Ten", "Twenty", "Thirty"];
export const SelectBa = () => {
  const theme = useTheme();
  const [personName, setPersonName] = React.useState<string>(""); // 单选初始化为空字符串

  const handleChange = (event: SelectChangeEvent<string>) => {
    setPersonName(event.target.value as string);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }} size="medium"> {/* 指定size值 */}
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="Age" />} {/* 修正label文本 */}
        >
          {/* 动态生成选项 */}
          {ageOptions.map((age) => (
            <MenuItem key={age} value={age}>
              {age}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
};

ReactDOM.render(<SelectBa />, document.querySelector("#app"));

多选场景实现（匹配你原代码的数组状态） #

如果需要支持多选，给Select添加multiple属性即可：

import React from "react";
import { useTheme } from "@mui/material/styles";
import ReactDOM from "react-dom";
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";
import OutlinedInput from "@mui/material/OutlinedInput";

const ageOptions = ["Ten", "Twenty", "Thirty"];
export const SelectBa = () => {
  const theme = useTheme();
  const [personName, setPersonName] = React.useState<string[]>([]);

  const handleChange = (event: SelectChangeEvent<string[]>) => {
    const { value } = event.target;
    setPersonName(typeof value === "string" ? value.split(",") : value);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }} size="medium">
        <InputLabel id="demo-multiple-select-label">Age</InputLabel>
        <Select
          labelId="demo-multiple-select-label"
          id="demo-multiple-select"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="Age" />}
        >
          {ageOptions.map((age) => (
            <MenuItem key={age} value={age}>
              {age}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
};

ReactDOM.render(<SelectBa />, document.querySelector("#app"));

可选：自定义选中项样式 #

如果需要保留选中项的自定义样式，补充getStyles函数即可：

const getStyles = (option: string, selectedValues: string | string[], theme: any) => {
  return {
    fontWeight:
      selectedValues.indexOf(option) !== -1
        ? theme.typography.fontWeightBold
        : theme.typography.fontWeightRegular,
  };
};

将其添加到组件内部后，在MenuItem的style属性中调用getStyles(age, personName, theme)即可。

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