Material-UI adds padding to the body tag when a dialog is opened

Question

I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag. I also checked the Material-UI site, and this is happening on their website too with dialogs.

Is this a bug with the new version of Material-UI?

How can I remove this padding from the body tag when opening a dialog?

Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.

Answer 1

as it was mentioned by @Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:

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

Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.

Answer 2

Just give disableScrollLock={ true }. I think it will solve the issue because I had the same.

Answer 3

I added disableScrollLock prop to my Dialog Component. It worked.

Answer 4

You can use a mui-fixed class for handling this issue, it's helpful for me.

Here is a link for material UI mui-fixed document : https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened

Hope this will help anyone.