Как иметь многострочные параметры в пользовательском интерфейсе выбора материала

Question

Цель проста, мне нужен UI материала Select, где его параметры (MenuItem) могут переносить длинные тексты, например, это будет текст одной опции:

"Edificação nova ou com исправлено и имеет существенное значение, com menos de dois anos, que aparesente needidade apenas de uma demão leve de pintura para Recompor a sua aparência"

В нынешнем виде вариант представляет собой одну большую строку текста, например: введите описание изображения здесь

Итак, как этого можно достичь, чтобы превратить избранный в удобный для мобильных устройств?

Спасибо.

Answer 1

Чтобы изменить ширину меню, вы можете предоставить опору MenuProps для выбора с требуемым стилем.

После этого вам нужно разрешить обтекание списка. По умолчанию для MenuItem установлено значение nowrap. Вы должны изменить это на нормальное, чтобы разрешить упаковку. Я скопировал код материала UI из codeandbox для Select, но удалил избыточный код.

Меню уведомлений и listItem в 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>
  );
}