MUI问题记录

MUI Dialog Bug：Closing Dialog causes scroll to top

这是一个已知问题。在 Material-UI（MUI）中，关闭<Dialog>组件时，页面可能会自动滚动到顶部。这个问题在社区中已有讨论，并在 GitHub 上有相关的 issue 记录。

解决方案1

使用 keepMounted 属性：在<Dialog>组件中添加 keepMounted 属性，可以防止组件在关闭时被卸载，从而保持滚动位置。

<Dialog open={open} keepMounted>
  {/* Dialog 内容 */}
</Dialog>

解决方案2

设置 disableEnforceFocus 属性：将 disableEnforceFocus 属性设置为 true，可以防止对话框在关闭时强制聚焦，从而避免页面滚动到顶部的问题。

<Dialog open={open} disableEnforceFocus>
  {/* Dialog 内容 */}
</Dialog>

解决方案3

手动记录和恢复滚动位置：在关闭对话框之前记录当前的滚动位置，并在重新打开时恢复。

const scrollPosition = useRef(0);

const handleClose = () => {
  scrollPosition.current = window.scrollY;
  setOpen(false);
};

useEffect(() => {
  if (open) {
    window.scrollTo(0, scrollPosition.current);
  }
}, [open]);