diff --git a/docs/src/pages/components/paper/SimplePaper.js b/docs/src/pages/components/paper/SimplePaper.js
index 14fb6081e2e190..4c7ae85508fc76 100644
--- a/docs/src/pages/components/paper/SimplePaper.js
+++ b/docs/src/pages/components/paper/SimplePaper.js
@@ -1,27 +1,24 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    '& > *': {
-      margin: theme.spacing(1),
-      width: theme.spacing(16),
-      height: theme.spacing(16),
-    },
-  },
-}));
-
 export default function SimplePaper() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        // TODO Replace with Stack
+        '& > :not(style)': {
+          m: 1,
+          width: 128,
+          height: 128,
+        },
+      }}
+    >
       <Paper elevation={0} />
       <Paper />
       <Paper elevation={3} />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/paper/SimplePaper.tsx b/docs/src/pages/components/paper/SimplePaper.tsx
index e8395de8e93483..4c7ae85508fc76 100644
--- a/docs/src/pages/components/paper/SimplePaper.tsx
+++ b/docs/src/pages/components/paper/SimplePaper.tsx
@@ -1,29 +1,24 @@
 import * as React from 'react';
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      '& > *': {
-        margin: theme.spacing(1),
-        width: theme.spacing(16),
-        height: theme.spacing(16),
-      },
-    },
-  }),
-);
-
 export default function SimplePaper() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        // TODO Replace with Stack
+        '& > :not(style)': {
+          m: 1,
+          width: 128,
+          height: 128,
+        },
+      }}
+    >
       <Paper elevation={0} />
       <Paper />
       <Paper elevation={3} />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/paper/Variants.js b/docs/src/pages/components/paper/Variants.js
index ca5f6091e09422..ac61c6894a1434 100644
--- a/docs/src/pages/components/paper/Variants.js
+++ b/docs/src/pages/components/paper/Variants.js
@@ -1,25 +1,22 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-      width: theme.spacing(16),
-      height: theme.spacing(16),
-    },
-  },
-}));
-
 export default function Variants() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        // TODO Replace with Stack
+        '& > :not(style)': {
+          m: 1,
+          width: 128,
+          height: 128,
+        },
+      }}
+    >
       <Paper variant="outlined" />
       <Paper variant="outlined" square />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/paper/Variants.tsx b/docs/src/pages/components/paper/Variants.tsx
index bc165ba91adcd3..ac61c6894a1434 100644
--- a/docs/src/pages/components/paper/Variants.tsx
+++ b/docs/src/pages/components/paper/Variants.tsx
@@ -1,27 +1,22 @@
 import * as React from 'react';
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      '& > *': {
-        margin: theme.spacing(1),
-        width: theme.spacing(16),
-        height: theme.spacing(16),
-      },
-    },
-  }),
-);
-
 export default function Variants() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        // TODO Replace with Stack
+        '& > :not(style)': {
+          m: 1,
+          width: 128,
+          height: 128,
+        },
+      }}
+    >
       <Paper variant="outlined" />
       <Paper variant="outlined" square />
-    </div>
+    </Box>
   );
 }