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

Question

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

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

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

Answer 1

当打开Material-UI Modal（Dialog杠杆）时，它会禁用打开后页面内容的滚动。它通过在 的容器上进行设置来实现这一点。ModalModalstyle.overflow = 'hidden';Modal

Material-UI 确实会记住属性的先前设置overflow，以便在Modal关闭时可以恢复设置。

您没有看到设置恢复的原因是您正在使用overflow-x而不是overflow. 当 Material-UI 设置overflowCSS 时，浏览器（至少在 Chrome 中）会清除该overflow-x设置，但 Material-UI 只会恢复该overflow设置（而不是overflow-x）。

如果您更改代码来设置overflow（例如document.body.style.overflow = "hidden auto";将overflow-x设置为“隐藏”，将overflow-y设置为“自动”），则Material-UI将在关闭时成功恢复它Dialog。

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