diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index b5af6c72e9cd73..5c585e3e824a8a 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -51,32 +51,21 @@ const styles = theme => ({
     },
   },
   demo: {
+    position: 'relative',
     outline: 0,
     margin: 'auto',
-    [theme.breakpoints.up('sm')]: {
-      borderRadius: theme.shape.borderRadius,
-    },
-    backgroundColor: theme.palette.background.level2,
+    borderRadius: theme.shape.borderRadius,
+    display: 'flex',
+    justifyContent: 'center',
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
     padding: theme.spacing(2),
-    '& $demoInner': {
-      border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-      borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.palette.background.paper,
+    [theme.breakpoints.up('sm')]: {
+      padding: theme.spacing(3),
     },
   },
   demoBg: {
-    '& $demoInner': {
-      border: 'none',
-      borderRadius: 0,
-      backgroundColor: 'transparent',
-      padding: 0,
-    },
-  },
-  demoInner: {
-    position: 'relative',
-    display: 'flex',
-    justifyContent: 'center',
-    padding: theme.spacing(2),
+    border: 'none',
+    backgroundColor: theme.palette.background.level2,
   },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
@@ -312,14 +301,12 @@ function Demo(props) {
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
       >
-        <div className={classes.demoInner}>
-          <DemoSandboxed
-            style={demoSandboxedStyle}
-            component={DemoComponent}
-            iframe={demoOptions.iframe}
-            name={demoName}
-          />
-        </div>
+        <DemoSandboxed
+          style={demoSandboxedStyle}
+          component={DemoComponent}
+          iframe={demoOptions.iframe}
+          name={demoName}
+        />
       </div>
       <div className={classes.anchorLink} id={`${demoName}.js`} />
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
diff --git a/docs/src/pages/components/modal/modal.md b/docs/src/pages/components/modal/modal.md
index 2475f1730a2837..f2c3b19c819b4c 100644
--- a/docs/src/pages/components/modal/modal.md
+++ b/docs/src/pages/components/modal/modal.md
@@ -60,7 +60,7 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
 React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server.
 In order to display the modal, you need to disable the portal feature with the `disablePortal` prop:
 
-{{"demo": "pages/components/modal/ServerModal.js", "bg": true}}
+{{"demo": "pages/components/modal/ServerModal.js"}}
 
 ## Accessibility