React/Material UI - 防止主体在弹出窗口上滚动

Question

React 和 MUI 新手，并且有一个 UX 问题，当我们有弹出窗口（下拉菜单或自动选择下拉菜单）时，我们仍然可以滚动网站的主体。我看到它在 MUI 的新 beta V1 中得到修复，但使用当前的稳定版本，我被要求看看我们是否可以破解它以停止滚动 - 但当我们有弹出窗口时，我似乎无法定位/捕获任何内容出现。

示例：当前 MUI - http://www.material-ui.com/#/components/auto-complete V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/

因此，如果您在这些示例中输入一些内容并触发向下/弹出窗口，您将看到在当前的 MUI 中，您仍然可以滚动

我希望有人可能遇到过这个问题并有他们想要分享的解决方案？

多谢你们！

Answer 1

我遇到了类似的问题并使用“disablePortal”自动完成属性解决它：

您可以在此处查看“disablePortal”定义： https: //material-ui.com/api/autocomplete/#props

disablePortal：禁用门户行为。子级保留在其父级 DOM 层次结构中。

我还必须添加一些样式以使弹出窗口相对于输入组件定位。

这是某种示例：

const useStyles = makeStyles({
    popperDisablePortal: {
      position: 'relative',
    }
  })

const classes = useStyles()

<Autocomplete
  classes={classes}
  disablePortal={true}
  {...props}
/>

所以你可能必须：

1. 设置disablePortal属性
2. 使用“相对”位置定义关联的 popperDisablePortal 样式

编辑：实际上，作为默认 MUI 自动完成设置的一部分，这个错误不应该发生。就我而言，错误是一些冲突的 CSS 属性导致了这个滚动条错误。不确定你的情况，但对我来说，它恰好是一些溢出：页面 HTML 标签上定义的 auto 属性（有时你可以在 body 标签上找到它）。替换为溢出：“可见”并且滚动错误应该消失，甚至无需更改自动完成组件定义的一行。