首页 > 解决方案 > 选择材质 UI - 添加带有溢出的确定按钮 #29437

问题描述

我使用材料 ui 的 SELECT 组件并且我试图添加 OK 按钮所以它会卡在向下滚动中(使用溢出-y)。

材质 ui 版本 - v4 ES6 @material-ui/core/Select

<FormControl>
  <Select
    className={classes.select}
    multiple
    displayEmpty
    value={selectedOptions}
    onChange={handleChange}
    disableUnderline
    MenuProps={MenuProps}
  >
    {options.map(option => (
      <MenuItem
        classes={{ root: classes.selectedOption}}
        key={option}
        value={option}
      >
        <CustomCheckbox checked={selectedOptions.includes(option)} />
        <ListItemText classes={{ primary: classes.selectText }} primary={option} />
      </MenuItem>
    ))}
    <Button
      className={classes.button}
      onClick={applySelectedVendorsHandler}
    >
      Ok
    </Button>
  </Select>
</FormControl>

应用按钮位于 Select 组件的底部,如下所示: 在此处输入图像描述

但我希望按钮出现在整个滚动中,我还在 MenuProp 上定义了 maxHeight。

标签: javascriptreact-hooksmaterial-ui

解决方案


推荐阅读