diff --git a/docs/src/pages/components/speed-dial/BasicSpeedDial.js b/docs/src/pages/components/speed-dial/BasicSpeedDial.js
index 2b545734da61e1..600c4a56c4b8f8 100644
--- a/docs/src/pages/components/speed-dial/BasicSpeedDial.js
+++ b/docs/src/pages/components/speed-dial/BasicSpeedDial.js
@@ -1,10 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Switch from '@material-ui/core/Switch';
+import Box from '@material-ui/core/Box';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
@@ -13,32 +8,6 @@ import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    transform: 'translateZ(0px)',
-    flexGrow: 1,
-  },
-  exampleWrapper: {
-    position: 'relative',
-    marginTop: theme.spacing(3),
-    height: 320,
-  },
-  radioGroup: {
-    margin: theme.spacing(1, 0),
-  },
-  speedDial: {
-    position: 'absolute',
-    '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
-      bottom: theme.spacing(2),
-      right: theme.spacing(2),
-    },
-    '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
-      top: theme.spacing(2),
-      left: theme.spacing(2),
-    },
-  },
-}));
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -46,60 +15,22 @@ const actions = [
   { icon: <ShareIcon />, name: 'Share' },
 ];
 
-export default function SpeedDials() {
-  const classes = useStyles();
-  const [direction, setDirection] = React.useState('up');
-
-  const [hidden, setHidden] = React.useState(false);
-
-  const handleDirectionChange = (event) => {
-    setDirection(event.target.value);
-  };
-
-  const handleHiddenChange = (event) => {
-    setHidden(event.target.checked);
-  };
-
+export default function BasicSpeedDial() {
   return (
-    <div className={classes.root}>
-      <FormControlLabel
-        control={
-          <Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
-        }
-        label="Hidden"
-      />
-      <FormLabel className={classes.radioGroup} component="legend">
-        Direction
-      </FormLabel>
-      <RadioGroup
-        aria-label="direction"
-        name="direction"
-        value={direction}
-        onChange={handleDirectionChange}
-        row
+    <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
+        icon={<SpeedDialIcon />}
       >
-        <FormControlLabel value="up" control={<Radio />} label="Up" />
-        <FormControlLabel value="right" control={<Radio />} label="Right" />
-        <FormControlLabel value="down" control={<Radio />} label="Down" />
-        <FormControlLabel value="left" control={<Radio />} label="Left" />
-      </RadioGroup>
-      <div className={classes.exampleWrapper}>
-        <SpeedDial
-          ariaLabel="SpeedDial example"
-          className={classes.speedDial}
-          hidden={hidden}
-          icon={<SpeedDialIcon />}
-          direction={direction}
-        >
-          {actions.map((action) => (
-            <SpeedDialAction
-              key={action.name}
-              icon={action.icon}
-              tooltipTitle={action.name}
-            />
-          ))}
-        </SpeedDial>
-      </div>
-    </div>
+        {actions.map((action) => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+          />
+        ))}
+      </SpeedDial>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx b/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx
index 873f361664b5e4..600c4a56c4b8f8 100644
--- a/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx
+++ b/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Switch from '@material-ui/core/Switch';
-import SpeedDial, { SpeedDialProps } from '@material-ui/core/SpeedDial';
+import Box from '@material-ui/core/Box';
+import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
 import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
@@ -13,34 +8,6 @@ import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      transform: 'translateZ(0px)',
-      flexGrow: 1,
-    },
-    exampleWrapper: {
-      position: 'relative',
-      marginTop: theme.spacing(3),
-      height: 320,
-    },
-    radioGroup: {
-      margin: theme.spacing(1, 0),
-    },
-    speedDial: {
-      position: 'absolute',
-      '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
-        bottom: theme.spacing(2),
-        right: theme.spacing(2),
-      },
-      '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
-        top: theme.spacing(2),
-        left: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -48,63 +15,22 @@ const actions = [
   { icon: <ShareIcon />, name: 'Share' },
 ];
 
-export default function SpeedDials() {
-  const classes = useStyles();
-  const [direction, setDirection] = React.useState<SpeedDialProps['direction']>(
-    'up',
-  );
-  const [hidden, setHidden] = React.useState(false);
-
-  const handleDirectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setDirection(
-      (event.target as HTMLInputElement).value as SpeedDialProps['direction'],
-    );
-  };
-
-  const handleHiddenChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setHidden(event.target.checked);
-  };
-
+export default function BasicSpeedDial() {
   return (
-    <div className={classes.root}>
-      <FormControlLabel
-        control={
-          <Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
-        }
-        label="Hidden"
-      />
-      <FormLabel className={classes.radioGroup} component="legend">
-        Direction
-      </FormLabel>
-      <RadioGroup
-        aria-label="direction"
-        name="direction"
-        value={direction}
-        onChange={handleDirectionChange}
-        row
+    <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
+        icon={<SpeedDialIcon />}
       >
-        <FormControlLabel value="up" control={<Radio />} label="Up" />
-        <FormControlLabel value="right" control={<Radio />} label="Right" />
-        <FormControlLabel value="down" control={<Radio />} label="Down" />
-        <FormControlLabel value="left" control={<Radio />} label="Left" />
-      </RadioGroup>
-      <div className={classes.exampleWrapper}>
-        <SpeedDial
-          ariaLabel="SpeedDial example"
-          className={classes.speedDial}
-          hidden={hidden}
-          icon={<SpeedDialIcon />}
-          direction={direction}
-        >
-          {actions.map((action) => (
-            <SpeedDialAction
-              key={action.name}
-              icon={action.icon}
-              tooltipTitle={action.name}
-            />
-          ))}
-        </SpeedDial>
-      </div>
-    </div>
+        {actions.map((action) => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+          />
+        ))}
+      </SpeedDial>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js
index 5d7f2401c3f744..0b22e2c57d815c 100644
--- a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js
+++ b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
@@ -8,19 +8,6 @@ import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 320,
-    transform: 'translateZ(0px)',
-    flexGrow: 1,
-  },
-  speedDial: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}));
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -29,16 +16,15 @@ const actions = [
 ];
 
 export default function ControlledOpenSpeedDial() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
       <SpeedDial
         ariaLabel="SpeedDial uncontrolled open example"
-        className={classes.speedDial}
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon />}
         onClose={handleClose}
         onOpen={handleOpen}
@@ -53,6 +39,6 @@ export default function ControlledOpenSpeedDial() {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx
index 96d984044a965c..0b22e2c57d815c 100644
--- a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx
+++ b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
@@ -8,19 +8,6 @@ import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    height: 320,
-    transform: 'translateZ(0px)',
-    flexGrow: 1,
-  },
-  speedDial: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}));
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -29,16 +16,15 @@ const actions = [
 ];
 
 export default function ControlledOpenSpeedDial() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
       <SpeedDial
         ariaLabel="SpeedDial uncontrolled open example"
-        className={classes.speedDial}
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon />}
         onClose={handleClose}
         onOpen={handleOpen}
@@ -53,6 +39,6 @@ export default function ControlledOpenSpeedDial() {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js
index 5e483a9059dbad..1fe36a557b4b37 100644
--- a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js
+++ b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
@@ -9,19 +9,6 @@ import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 import EditIcon from '@material-ui/icons/Edit';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 320,
-    transform: 'translateZ(0px)',
-    flexGrow: 1,
-  },
-  speedDial: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}));
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -30,13 +17,11 @@ const actions = [
 ];
 
 export default function OpenIconSpeedDial() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
       <SpeedDial
         ariaLabel="SpeedDial openIcon example"
-        className={classes.speedDial}
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon openIcon={<EditIcon />} />}
       >
         {actions.map((action) => (
@@ -47,6 +32,6 @@ export default function OpenIconSpeedDial() {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx
index 6a1bf981247f33..1fe36a557b4b37 100644
--- a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx
+++ b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
@@ -9,21 +9,6 @@ import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 import EditIcon from '@material-ui/icons/Edit';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 320,
-      transform: 'translateZ(0px)',
-      flexGrow: 1,
-    },
-    speedDial: {
-      position: 'absolute',
-      bottom: theme.spacing(2),
-      right: theme.spacing(2),
-    },
-  }),
-);
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -32,13 +17,11 @@ const actions = [
 ];
 
 export default function OpenIconSpeedDial() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
       <SpeedDial
         ariaLabel="SpeedDial openIcon example"
-        className={classes.speedDial}
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon openIcon={<EditIcon />} />}
       >
         {actions.map((action) => (
@@ -49,6 +32,6 @@ export default function OpenIconSpeedDial() {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js
new file mode 100644
index 00000000000000..a7b122e25ccc71
--- /dev/null
+++ b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormLabel from '@material-ui/core/FormLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Switch from '@material-ui/core/Switch';
+import SpeedDial from '@material-ui/core/SpeedDial';
+import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/core/SpeedDialAction';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
+import SaveIcon from '@material-ui/icons/Save';
+import PrintIcon from '@material-ui/icons/Print';
+import ShareIcon from '@material-ui/icons/Share';
+
+const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
+  position: 'absolute',
+  '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+  '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
+    top: theme.spacing(2),
+    left: theme.spacing(2),
+  },
+}));
+
+const actions = [
+  { icon: <FileCopyIcon />, name: 'Copy' },
+  { icon: <SaveIcon />, name: 'Save' },
+  { icon: <PrintIcon />, name: 'Print' },
+  { icon: <ShareIcon />, name: 'Share' },
+];
+
+export default function PlaygroundSpeedDial() {
+  const [direction, setDirection] = React.useState('up');
+
+  const [hidden, setHidden] = React.useState(false);
+
+  const handleDirectionChange = (event) => {
+    setDirection(event.target.value);
+  };
+
+  const handleHiddenChange = (event) => {
+    setHidden(event.target.checked);
+  };
+
+  return (
+    <Box sx={{ transform: 'translateZ(0px)', flexGrow: 1 }}>
+      <FormControlLabel
+        control={
+          <Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
+        }
+        label="Hidden"
+      />
+      <FormLabel sx={{ my: 1 }} component="legend">
+        Direction
+      </FormLabel>
+      <RadioGroup
+        aria-label="direction"
+        name="direction"
+        value={direction}
+        onChange={handleDirectionChange}
+        row
+      >
+        <FormControlLabel value="up" control={<Radio />} label="Up" />
+        <FormControlLabel value="right" control={<Radio />} label="Right" />
+        <FormControlLabel value="down" control={<Radio />} label="Down" />
+        <FormControlLabel value="left" control={<Radio />} label="Left" />
+      </RadioGroup>
+      <Box sx={{ position: 'relative', mt: 3, height: 320 }}>
+        <StyledSpeedDial
+          ariaLabel="SpeedDial playground example"
+          hidden={hidden}
+          icon={<SpeedDialIcon />}
+          direction={direction}
+        >
+          {actions.map((action) => (
+            <SpeedDialAction
+              key={action.name}
+              icon={action.icon}
+              tooltipTitle={action.name}
+            />
+          ))}
+        </StyledSpeedDial>
+      </Box>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx
new file mode 100644
index 00000000000000..7c51cac7cf1054
--- /dev/null
+++ b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormLabel from '@material-ui/core/FormLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Switch from '@material-ui/core/Switch';
+import SpeedDial, { SpeedDialProps } from '@material-ui/core/SpeedDial';
+import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/core/SpeedDialAction';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
+import SaveIcon from '@material-ui/icons/Save';
+import PrintIcon from '@material-ui/icons/Print';
+import ShareIcon from '@material-ui/icons/Share';
+
+const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
+  position: 'absolute',
+  '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+  '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
+    top: theme.spacing(2),
+    left: theme.spacing(2),
+  },
+}));
+
+const actions = [
+  { icon: <FileCopyIcon />, name: 'Copy' },
+  { icon: <SaveIcon />, name: 'Save' },
+  { icon: <PrintIcon />, name: 'Print' },
+  { icon: <ShareIcon />, name: 'Share' },
+];
+
+export default function PlaygroundSpeedDial() {
+  const [direction, setDirection] = React.useState<SpeedDialProps['direction']>(
+    'up',
+  );
+  const [hidden, setHidden] = React.useState(false);
+
+  const handleDirectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDirection(
+      (event.target as HTMLInputElement).value as SpeedDialProps['direction'],
+    );
+  };
+
+  const handleHiddenChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setHidden(event.target.checked);
+  };
+
+  return (
+    <Box sx={{ transform: 'translateZ(0px)', flexGrow: 1 }}>
+      <FormControlLabel
+        control={
+          <Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
+        }
+        label="Hidden"
+      />
+      <FormLabel sx={{ my: 1 }} component="legend">
+        Direction
+      </FormLabel>
+      <RadioGroup
+        aria-label="direction"
+        name="direction"
+        value={direction}
+        onChange={handleDirectionChange}
+        row
+      >
+        <FormControlLabel value="up" control={<Radio />} label="Up" />
+        <FormControlLabel value="right" control={<Radio />} label="Right" />
+        <FormControlLabel value="down" control={<Radio />} label="Down" />
+        <FormControlLabel value="left" control={<Radio />} label="Left" />
+      </RadioGroup>
+      <Box sx={{ position: 'relative', mt: 3, height: 320 }}>
+        <StyledSpeedDial
+          ariaLabel="SpeedDial playground example"
+          hidden={hidden}
+          icon={<SpeedDialIcon />}
+          direction={direction}
+        >
+          {actions.map((action) => (
+            <SpeedDialAction
+              key={action.name}
+              icon={action.icon}
+              tooltipTitle={action.name}
+            />
+          ))}
+        </StyledSpeedDial>
+      </Box>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js
index 6f2c611e6d333a..0e7e1f73a08124 100644
--- a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js
+++ b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Backdrop from '@material-ui/core/Backdrop';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
@@ -9,19 +9,6 @@ import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 330,
-    transform: 'translateZ(0px)',
-    flexGrow: 1,
-  },
-  speedDial: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-}));
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -30,17 +17,16 @@ const actions = [
 ];
 
 export default function SpeedDialTooltipOpen() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 330, transform: 'translateZ(0px)', flexGrow: 1 }}>
       <Backdrop open={open} />
       <SpeedDial
         ariaLabel="SpeedDial tooltip example"
-        className={classes.speedDial}
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon />}
         onClose={handleClose}
         onOpen={handleOpen}
@@ -56,6 +42,6 @@ export default function SpeedDialTooltipOpen() {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx
index 728d311417f545..0e7e1f73a08124 100644
--- a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx
+++ b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Backdrop from '@material-ui/core/Backdrop';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
@@ -9,21 +9,6 @@ import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 330,
-      transform: 'translateZ(0px)',
-      flexGrow: 1,
-    },
-    speedDial: {
-      position: 'absolute',
-      bottom: theme.spacing(2),
-      right: theme.spacing(2),
-    },
-  }),
-);
-
 const actions = [
   { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
@@ -32,17 +17,16 @@ const actions = [
 ];
 
 export default function SpeedDialTooltipOpen() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 330, transform: 'translateZ(0px)', flexGrow: 1 }}>
       <Backdrop open={open} />
       <SpeedDial
         ariaLabel="SpeedDial tooltip example"
-        className={classes.speedDial}
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon />}
         onClose={handleClose}
         onOpen={handleOpen}
@@ -58,6 +42,6 @@ export default function SpeedDialTooltipOpen() {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/speed-dial/speed-dial.md b/docs/src/pages/components/speed-dial/speed-dial.md
index b49678e80978cb..d0a1d63c19f732 100644
--- a/docs/src/pages/components/speed-dial/speed-dial.md
+++ b/docs/src/pages/components/speed-dial/speed-dial.md
@@ -20,6 +20,10 @@ The floating action button can display related actions.
 
 {{"demo": "pages/components/speed-dial/BasicSpeedDial.js"}}
 
+## Playground
+
+{{"demo": "pages/components/speed-dial/PlaygroundSpeedDial.js"}}
+
 ## Controlled speed dial
 
 The open state of the component can be controlled with the `open`/`onOpen`/`onClose` props.