Пользовательский интерфейс материала Выберите Реакция. js

Question

Возможно, мы сможем изменить поведение выпадающего меню в Material UI Select? Я хочу изменить поведение <ul>, чтобы оно не выглядело как всплывающее окно.

То, что я хочу, - это то, что <li> будет инкапсулировать выбранное <ul> Так же, как на втором изображении ниже:

Это текущий компонент выбора материала UI

То, чего я хочу достичь, выглядит примерно так:

Это мой код:

<FormControl
  variant="outlined"
  className={clsx(
    classes.formControl,
    success && classes.success,
    danger && classes.danger
  )}
  required={isRequired}
>
  <InputLabel>{label}</InputLabel>
  <Select
    value={value}
    onChange={e => handleOnChange(e)}
    // MenuProps={{ classes: { paper: classes.dropdownPaper }}}
    label={label}
    name={name}
    MenuProps={{
      classes: { paper: classes.dropdownPaper },
      anchorOrigin: {
        vertical: "bottom",
        horizontal: "left"
      },
      getContentAnchorEl: null
    }}
  >
    {options.map((opt, index) => {
      return (
        <MenuItem value={opt.value} key={index}>
          {opt.text}
        </MenuItem>
      );
    })}
  </Select>
</FormControl>;

Answer 1

Надеюсь, это поможет:

Вместо того, чтобы искать в разделе компонентов текстового поля, вам нужно go перейти к разделу компонентов меню и найти выбранный компонент меню или пользовательский компонент меню. элементы, всплывающие справа над кнопкой, вот ссылка: https://material-ui.com/components/menus/

Вы также можете настроить «компонент кнопки разделения», так как он уже имеет то, что вы ищете, встроенный, Единственное, что вам нужно настроить цвет. Вот ссылка на компонент кнопки, в нижней части страницы находится «разделенная кнопка». https://material-ui.com/components/button-group/

Надеюсь, это поможет.