[Modal] Scrollbar width is wrong when customized

When you have a scrollbar style applied to body, the modal will break the design.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Design move always 16px.

Expected Behavior 🤔

Padding added should be the same size as the scrollbar.

Steps to Reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/material-demo-forked-74db5
2. Click in Open Alert Dialog

Context 🔦

Trying to design a smaller scroll bar for a reading app.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 12.16.2 - C:\Program Files\nodejs\node.EXE      
    Yarn: Not Found
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81)
  npmPackages:
    @material-ui/core: ^4.11.0 => 4.11.0
    @material-ui/icons: ^4.9.1 => 4.9.1
    @material-ui/lab: 4.0.0-alpha.56 => 4.0.0-alpha.56    
    @material-ui/styles:  4.10.0
    @material-ui/system:  4.9.14
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.9.12
    @types/react:  16.9.34
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    styled-components: ^5.2.1 => 5.2.1

[Gautam-Arora24]

@oliviertassinari Can I work on this issue?

[oliviertassinari]

@danieljaguiar I can confirm the wrong behavior, I can also confirm that the proposed fix seems to work. Why not give it a try. I like how it might reduce the bundle size of the modal by simplifying the module. As a side note:

• Bootstrap is using this implementation: https://github.com/twbs/bootstrap/blob/488fd8afc535ca3a6ad4dc581f5e89217b6a36ac/js/src/util/scrollbar.js#L14-L18
• react-remove-scroll-bar is using this implementation: https://github.com/theKashey/react-remove-scroll-bar/blob/602012d037385c7a5b0d1028b00d3edb12b2ee8a/src/utils.ts#L31