Reactjs 如何在“选择材质”UI中具有多行选项

目标很简单，我需要一个材料界面

Select

，其中的选项（

MenuItem

）能够包装长文本，例如，这将是一个选项的文本：

“改革实体经济的新大厦，是一座现代化的新大厦，它代表了一个国家的改革所必需的。”

现在，选项是一大行文本，如下所示：

那么，如何实现这一点，才能将select变为移动友好型

---

谢谢。

要更改菜单的宽度，您可以提供道具菜单，以选择所需的样式

之后，您需要让列表环绕。默认情况下，MenuItem将空白设置为nowrap。您应该将其更改为“正常”，以允许包装。我已经从codesandbox复制了材料UI代码，用于选择，但删除了冗余代码

注意makeStyles中的菜单和列表项

const useStyles = makeStyles((theme) => ({
  button: {
    display: 'block',
    marginTop: theme.spacing(2),
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  menu:{
    width: 200,
  },
  listItem: {
    whiteSpace: "normal",
  }
}));

export default function ControlledOpenSelect() {
  const classes = useStyles();
  return (
    <div>
      <Button className={classes.button} onClick={handleOpen}>
        Open the select
      </Button>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
        <Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
          value={age}
          onChange={handleChange}
          MenuProps={{className: classes.menu}}
        >
          <MenuItem className={classes.listItem} value="">
            <em>None</em>
          </MenuItem>
          <MenuItem className={classes.listItem} value={10}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan diam ac elit ultricies volutpat. Curabitur ac accumsan massa, suscipit.</MenuItem>
          <MenuItem className={classes.listItem} value={20}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan diam ac elit ultricies volutpat. Curabitur ac accumsan massa, suscipit.</MenuItem>
          <MenuItem className={classes.listItem} value={30}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan diam ac elit ultricies volutpat. Curabitur ac accumsan massa, suscipit.</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

const useStyles=makeStyles（（主题）=>({
按钮：{
显示：“块”，
marginTop：主题。间距（2），
},
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
菜单：{
宽度：200，
},
列表项：{
空白：“正常”，
}
}));
导出默认函数ControlleOpenSelect（）{
const classes=useStyles（）；
返回(
打开选择按钮
年龄
没有一个
Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。suscipit，suscipit，Succipisse accumsan diam ac Elite ultricies Volumpat.Curabitur ac accumsan massa。
Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。suscipit，suscipit，Succipisse accumsan diam ac Elite ultricies Volumpat.Curabitur ac accumsan massa。
Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。suscipit，suscipit，Succipisse accumsan diam ac Elite ultricies Volumpat.Curabitur ac accumsan massa。
);
}

谢谢，成功了。