Question

React和MUI的新功能，并且遇到UX问题，当我们有弹出框（下拉菜单或自动选择下拉列表）时，我们仍然可以滚动网站的主体。我看到它固定在MUI的新测试版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}
/>

所以您可能必须：

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

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

React / Material UI - 防止弹出窗口

1 个答案: