reactjs - Material-UI 在打开对话框时向 body 标签添加填充

Question

我在我的反应应用程序中使用 Material-UI。最近，我将我的包更新到了最新版本。现在，当我在我的应用程序中打开一个对话框时，padding-right: 17px;将被添加到 body 标记中。我还检查了 Material-UI 网站，这也发生在他们的网站上，带有对话框。

这是新版 Material-UI 的 bug 吗？

打开对话框时如何从正文标签中删除此填充？

更新：此填充将添加到带有 Drawer、Menu、Dialog 和 Popover 组件的 body 标记中。

score 7 · Accepted Answer

正如@Reins 提到的，您可以使用disableScrollLock属性。问题是有时此属性嵌套在组件的输入中，因此您需要使用inputProps它来设置它。以下是 Select 组件的示例：

<Select
    className={classes.select}
    inputProps={{MenuProps: {disableScrollLock: true}}}
    ...
/>

有时您可能想深入研究 MUI 代码库，以便弄清楚如何应用某些嵌套元素的属性。

score 7 · Accepted Answer

只要给disableScrollLock={ true }。我认为它会解决这个问题，因为我有同样的问题。

score 5 · Accepted Answer

5

disableScrollLock我在对话框组件中添加了道具。有效。

于 2020-08-13T10:14:10.690 回答

score 4 · Accepted Answer

您可以使用 mui-fixed 类来处理此问题，这对我很有帮助。

希望这会帮助任何人。

score 0 · Accepted Answer

我在我的主 css 文件中添加了以下代码片段，并去掉了正文边距：

body {
    margin: 0;
}

score 0 · Accepted Answer

对我来说，解决方案是添加

overflow: auto;

到#root 选择器：

#root { 
    ... other css that was there before
    overflow: auto;
}

6 回答 6