时间戳

首页 > 解决方案 > 材质 UI 选择 React.js

html - 材质 UI 选择 React.js

问题描述

我们可以改变 Material UI Select 中下拉菜单的行为吗？我想改变<ul>它不应该像弹出窗口的行为。

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

这是 Material UI 的当前 Select 组件

我想要实现的是这样的： 在此处输入图像描述

这是我的代码：

<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>;

标签： htmlcssreactjsmaterial-ui

解决方案

希望这可以帮助：

我要做的不是在文本字段组件部分中搜索，而是您需要转到菜单组件部分并搜索选定的菜单组件或自定义菜单组件，这里的按钮上方弹出的项目是一个链接：https：/ /material-ui.com/components/menus/

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

希望这可以帮助。

推荐阅读