reactjs - 为什么在 Material-UI 中打开和关闭对话框会从我的 body 属性中删除样式？

Question

在父组件中，当组件安装时，我使用几种样式修改主体:

document.body.style.overflowX = "hidden";
document.body.style.width = "100%";

在我的父组件中是对话框子组件，但是当我打开和关闭对话框时，overflow 属性将被删除，而 width 属性仍然保留。为什么？

Answer 1

打开 Material-UI Modal(Dialog 利用 Modal)时，它会禁用 后面的页面内容滚动模态 当它打开时。它通过设置style.overflow = 'hidden';来实现这一点。在 Modal 的容器上。

Material-UI 确实 remember the previous setting overflow 属性，以便在 Modal 关闭时恢复设置。

您没有看到设置已恢复的原因是您使用的是 overflow-x 而不是 overflow。当 Material-UI 设置 overflow CSS 时，浏览器(至少在 Chrome 中)会清除 overflow-x 设置，但 Material-UI 仅恢复 overflow 设置(不是 overflow-x)。

如果您更改代码以设置overflow(例如document.body.style.overflow = "hidden auto";将overflow-x设置为“hidden”并且Overflow-y 为“auto”)，当 Dialog 关闭时，Material-UI 会成功恢复它。

示例:https://codesandbox.io/s/dialog-with-overflow-set-on-document-body-1npp0