材质UI选择React.js

Question

是否有可能在Material UI Select中更改下拉列表的行为？我想更改<ul>的行为，使其看起来不像弹出窗口。

我要发生的是<li>将封装所选的<ul> 就像下面的第二张图片一样：

这是Material 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

希望这会有所帮助：

我要做的是，而不是在textfield组件部分中进行搜索，您需要转到菜单组件部分并搜索所选菜单组件或自定义菜单组件，该项目是按钮上方弹出的链接： https://material-ui.com/components/menus/

您还可以自定义“拆分按钮组件”，因为它已经内置了您要查找的内容，这是您唯一需要自定义颜色的内容。这是按钮组件的链接，““拆分按钮”位于页面底部。 https://material-ui.com/components/button-group/

希望这会有所帮助。