Reactjs 反应/材料界面-防止popover上的主体滚动

新的反应和MUI，并有一个用户体验的问题，当我们有一个弹出菜单（下拉菜单，或自动选择下拉），我们仍然可以滚动网站的主体。我看到它在MUI的新beta V1中得到了修复，但使用当前的稳定版本，我被要求查看我们是否可以对其进行黑客攻击以停止滚动-但是当我们出现弹出窗口时，我似乎无法锁定/捕获任何内容

示例：当前的MUI- V1β-MUI-

因此，如果您要在这些示例中输入一些内容并触发downdown/popover，您将看到在当前MUI中，您仍然可以滚动 我希望有人可能有这个问题，并有一个解决方案，他们想分享

---

谢谢大家

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

您可以在此处查看“disablePortal”的定义：

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

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

以下是一些示例：

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

const classes = useStyles()

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

const useStyles=makeStyles({
popperDisablePortal：{
位置：'相对'，
}
})
常量类=useStyles（）

因此，您可能必须：

设置disablePortal属性

定义具有“相对”位置的关联popperDisablePortal样式

---

编辑：实际上这个错误不应该作为默认MUI自动完成设置的一部分发生。在我的例子中，错误是一些产生这个滚动程序错误的CSS属性冲突。在您的情况下不确定，但对我来说它恰好是一些溢出：在页面HTML标记上定义的自动属性（有时您可以在body标记上找到它）。替换为溢出：“可见”和滚动错误应该消失，甚至不更改自动完成组件定义的一行。

我也遇到了这个问题。我认为关键是将ref附加到要滚动的适当的popover元素。但是，由于popover在窗口级别而不是组件级别渲染，因此您很可能没有应用不同滚动位置或样式的范围。