diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.js
index a7187f53710170..718cff0677a111 100644
--- a/docs/src/pages/components/click-away-listener/ClickAway.js
+++ b/docs/src/pages/components/click-away-listener/ClickAway.js
@@ -1,25 +1,8 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    position: 'relative',
-  },
-  dropdown: {
-    position: 'absolute',
-    top: 28,
-    right: 0,
-    left: 0,
-    zIndex: 1,
-    border: '1px solid',
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function ClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -30,18 +13,29 @@ export default function ClickAway() {
     setOpen(false);
   };
 
+  const styles = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx
index ba9f78f6cbad76..1eb06c210c8bc8 100644
--- a/docs/src/pages/components/click-away-listener/ClickAway.tsx
+++ b/docs/src/pages/components/click-away-listener/ClickAway.tsx
@@ -1,27 +1,9 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-    },
-    dropdown: {
-      position: 'absolute',
-      top: 28,
-      right: 0,
-      left: 0,
-      zIndex: 1,
-      border: '1px solid',
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+import { SxProps } from '@material-ui/system';
 
 export default function ClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -32,18 +14,29 @@ export default function ClickAway() {
     setOpen(false);
   };
 
+  const styles: SxProps = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/LeadingClickAway.js b/docs/src/pages/components/click-away-listener/LeadingClickAway.js
index 5f98d00c2a0927..183e0ee39d30f3 100644
--- a/docs/src/pages/components/click-away-listener/LeadingClickAway.js
+++ b/docs/src/pages/components/click-away-listener/LeadingClickAway.js
@@ -1,25 +1,8 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    position: 'relative',
-  },
-  dropdown: {
-    position: 'absolute',
-    top: 28,
-    right: 0,
-    left: 0,
-    zIndex: 1,
-    border: '1px solid',
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function LeadingClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -30,22 +13,33 @@ export default function LeadingClickAway() {
     setOpen(false);
   };
 
+  const styles = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener
       mouseEvent="onMouseDown"
       touchEvent="onTouchStart"
       onClickAway={handleClickAway}
     >
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx b/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx
index b2957eb82722c3..be8cd9e0e6ae65 100644
--- a/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx
+++ b/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx
@@ -1,27 +1,9 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-    },
-    dropdown: {
-      position: 'absolute',
-      top: 28,
-      right: 0,
-      left: 0,
-      zIndex: 1,
-      border: '1px solid',
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+import { SxProps } from '@material-ui/system';
 
 export default function LeadingClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -32,22 +14,33 @@ export default function LeadingClickAway() {
     setOpen(false);
   };
 
+  const styles: SxProps = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener
       mouseEvent="onMouseDown"
       touchEvent="onTouchStart"
       onClickAway={handleClickAway}
     >
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/PortalClickAway.js b/docs/src/pages/components/click-away-listener/PortalClickAway.js
index f59624314d3d7a..2f4a56c7738777 100644
--- a/docs/src/pages/components/click-away-listener/PortalClickAway.js
+++ b/docs/src/pages/components/click-away-listener/PortalClickAway.js
@@ -1,23 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Portal from '@material-ui/core/Portal';
 
-const useStyles = makeStyles((theme) => ({
-  dropdown: {
-    position: 'fixed',
-    width: 200,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    border: '1px solid',
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function PortalClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -28,6 +14,17 @@ export default function PortalClickAway() {
     setOpen(false);
   };
 
+  const styles = {
+    position: 'fixed',
+    width: 200,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
       <div>
@@ -36,9 +33,9 @@ export default function PortalClickAway() {
         </button>
         {open ? (
           <Portal>
-            <div className={classes.dropdown}>
+            <Box sx={styles}>
               Click me, I will stay visible until you click outside.
-            </div>
+            </Box>
           </Portal>
         ) : null}
       </div>
diff --git a/docs/src/pages/components/click-away-listener/PortalClickAway.tsx b/docs/src/pages/components/click-away-listener/PortalClickAway.tsx
index 35d4eddb44ef0a..cda151c25961e5 100644
--- a/docs/src/pages/components/click-away-listener/PortalClickAway.tsx
+++ b/docs/src/pages/components/click-away-listener/PortalClickAway.tsx
@@ -1,25 +1,10 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Portal from '@material-ui/core/Portal';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    dropdown: {
-      position: 'fixed',
-      width: 200,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: '1px solid',
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+import { SxProps } from '@material-ui/system';
 
 export default function PortalClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -30,6 +15,17 @@ export default function PortalClickAway() {
     setOpen(false);
   };
 
+  const styles: SxProps = {
+    position: 'fixed',
+    width: 200,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
       <div>
@@ -38,9 +34,9 @@ export default function PortalClickAway() {
         </button>
         {open ? (
           <Portal>
-            <div className={classes.dropdown}>
+            <Box sx={styles}>
               Click me, I will stay visible until you click outside.
-            </div>
+            </Box>
           </Portal>
         ) : null}
       </div>