From 7524ba5a89993282cf517c0db4c0443e6e51ff1e Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 7 May 2021 10:22:59 +0200
Subject: [PATCH] [docs] Migrate Tooltip, Steppers demos to emotion (#26165)

---
 .../components/steppers/CustomizedSteppers.js | 146 ++++++++----------
 .../steppers/CustomizedSteppers.tsx           | 144 +++++++----------
 .../components/steppers/DotsMobileStepper.js  |  12 +-
 .../components/steppers/DotsMobileStepper.tsx |  12 +-
 ...HorizontalLinearAlternativeLabelStepper.js |  14 +-
 ...orizontalLinearAlternativeLabelStepper.tsx |  14 +-
 .../steppers/HorizontalLinearStepper.js       |  54 ++-----
 .../steppers/HorizontalLinearStepper.tsx      |  54 ++-----
 .../steppers/HorizontalNonLinearStepper.js    |  55 ++-----
 .../steppers/HorizontalNonLinearStepper.tsx   |  55 ++-----
 .../steppers/HorizontalStepperWithError.js    |  14 +-
 .../steppers/HorizontalStepperWithError.tsx   |  14 +-
 .../steppers/ProgressMobileStepper.js         |  12 +-
 .../steppers/ProgressMobileStepper.tsx        |  12 +-
 .../steppers/SwipeableTextMobileStepper.js    |  54 +++----
 .../steppers/SwipeableTextMobileStepper.tsx   |  54 +++----
 .../components/steppers/TextMobileStepper.js  |  44 +++---
 .../components/steppers/TextMobileStepper.tsx |  44 +++---
 .../steppers/VerticalLinearStepper.js         |  35 ++---
 .../steppers/VerticalLinearStepper.tsx        |  35 ++---
 .../components/tooltips/CustomizedTooltips.js |  34 ++--
 .../tooltips/CustomizedTooltips.tsx           |  34 ++--
 .../components/tooltips/PositionedTooltips.js |  14 +-
 .../tooltips/PositionedTooltips.tsx           |  14 +-
 .../components/tooltips/VariableWidth.js      |  38 ++---
 .../components/tooltips/VariableWidth.tsx     |  38 ++---
 26 files changed, 384 insertions(+), 666 deletions(-)

diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js
index 4a1c2ef7adca88..a79b564c673efc 100644
--- a/docs/src/pages/components/steppers/CustomizedSteppers.js
+++ b/docs/src/pages/components/steppers/CustomizedSteppers.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
@@ -9,79 +9,65 @@ import Check from '@material-ui/icons/Check';
 import SettingsIcon from '@material-ui/icons/Settings';
 import GroupAddIcon from '@material-ui/icons/GroupAdd';
 import VideoLabelIcon from '@material-ui/icons/VideoLabel';
-import StepConnector from '@material-ui/core/StepConnector';
+import StepConnector, {
+  stepConnectorClasses,
+} from '@material-ui/core/StepConnector';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-  quontoStepper: {
-    marginBottom: 32,
-  },
-});
-
-const QontoConnector = withStyles({
-  alternativeLabel: {
+const QontoConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 10,
     left: 'calc(-50% + 16px)',
     right: 'calc(50% + 16px)',
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       borderColor: '#784af4',
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       borderColor: '#784af4',
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     borderColor: '#eaeaf0',
     borderTopWidth: 3,
     borderRadius: 1,
   },
-})(StepConnector);
+});
 
-const useQontoStepIconStyles = makeStyles({
-  root: {
-    color: '#eaeaf0',
-    display: 'flex',
-    height: 22,
-    alignItems: 'center',
-  },
-  active: {
+const QontoStepIconRoot = styled('div')(({ styleProps = {} }) => ({
+  color: '#eaeaf0',
+  display: 'flex',
+  height: 22,
+  alignItems: 'center',
+  ...(!!styleProps.active && {
     color: '#784af4',
+  }),
+  '& .QontoStepIcon-completedIcon': {
+    color: '#784af4',
+    zIndex: 1,
+    fontSize: 18,
   },
-  circle: {
+  '& .QontoStepIcon-circle': {
     width: 8,
     height: 8,
     borderRadius: '50%',
     backgroundColor: 'currentColor',
   },
-  completed: {
-    color: '#784af4',
-    zIndex: 1,
-    fontSize: 18,
-  },
-});
+}));
 
 function QontoStepIcon(props) {
-  const classes = useQontoStepIconStyles();
-  const { active, completed } = props;
+  const { active, completed, className } = props;
 
   return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-      })}
-    >
+    <QontoStepIconRoot styleProps={{ active }} className={className}>
       {completed ? (
-        <Check className={classes.completed} />
+        <Check className="QontoStepIcon-completedIcon" />
       ) : (
-        <div className={classes.circle} />
+        <div className="QontoStepIcon-circle" />
       )}
-    </div>
+    </QontoStepIconRoot>
   );
 }
 
@@ -91,6 +77,7 @@ QontoStepIcon.propTypes = {
    * @default false
    */
   active: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Mark the step as completed. Is passed to child components.
    * @default false
@@ -98,56 +85,53 @@ QontoStepIcon.propTypes = {
   completed: PropTypes.bool,
 };
 
-const ColorlibConnector = withStyles({
-  alternativeLabel: {
+const ColorlibConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 22,
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
         'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
         'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     height: 3,
     border: 0,
     backgroundColor: '#eaeaf0',
     borderRadius: 1,
   },
-})(StepConnector);
+});
 
-const useColorlibStepIconStyles = makeStyles({
-  root: {
-    backgroundColor: '#ccc',
-    zIndex: 1,
-    color: '#fff',
-    width: 50,
-    height: 50,
-    display: 'flex',
-    borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  active: {
+const ColorlibStepIconRoot = styled('div')(({ styleProps = {} }) => ({
+  backgroundColor: '#ccc',
+  zIndex: 1,
+  color: '#fff',
+  width: 50,
+  height: 50,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(!!styleProps.active && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
     boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
-  },
-  completed: {
+  }),
+  ...(!!styleProps.completed && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
-  },
-});
+  }),
+}));
 
 function ColorlibStepIcon(props) {
-  const classes = useColorlibStepIconStyles();
-  const { active, completed } = props;
+  const { active, completed, className } = props;
 
   const icons = {
     1: <SettingsIcon />,
@@ -156,14 +140,9 @@ function ColorlibStepIcon(props) {
   };
 
   return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-        [classes.completed]: completed,
-      })}
-    >
+    <ColorlibStepIconRoot styleProps={{ completed, active }} className={className}>
       {icons[String(props.icon)]}
-    </div>
+    </ColorlibStepIconRoot>
   );
 }
 
@@ -173,6 +152,7 @@ ColorlibStepIcon.propTypes = {
    * @default false
    */
   active: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Mark the step as completed. Is passed to child components.
    * @default false
@@ -187,15 +167,13 @@ ColorlibStepIcon.propTypes = {
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function CustomizedSteppers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper
         alternativeLabel
         activeStep={1}
         connector={<QontoConnector />}
-        className={classes.quontoStepper}
+        sx={{ mb: 4 }}
       >
         {steps.map((label) => (
           <Step key={label}>
@@ -210,6 +188,6 @@ export default function CustomizedSteppers() {
           </Step>
         ))}
       </Stepper>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.tsx b/docs/src/pages/components/steppers/CustomizedSteppers.tsx
index f13b911a376cb3..657f55d3fad98d 100644
--- a/docs/src/pages/components/steppers/CustomizedSteppers.tsx
+++ b/docs/src/pages/components/steppers/CustomizedSteppers.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
@@ -8,133 +8,116 @@ import Check from '@material-ui/icons/Check';
 import SettingsIcon from '@material-ui/icons/Settings';
 import GroupAddIcon from '@material-ui/icons/GroupAdd';
 import VideoLabelIcon from '@material-ui/icons/VideoLabel';
-import StepConnector from '@material-ui/core/StepConnector';
+import StepConnector, {
+  stepConnectorClasses,
+} from '@material-ui/core/StepConnector';
 import { StepIconProps } from '@material-ui/core/StepIcon';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-  quontoStepper: {
-    marginBottom: 32,
-  },
-});
-
-const QontoConnector = withStyles({
-  alternativeLabel: {
+const QontoConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 10,
     left: 'calc(-50% + 16px)',
     right: 'calc(50% + 16px)',
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       borderColor: '#784af4',
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       borderColor: '#784af4',
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     borderColor: '#eaeaf0',
     borderTopWidth: 3,
     borderRadius: 1,
   },
-})(StepConnector);
+});
 
-const useQontoStepIconStyles = makeStyles({
-  root: {
-    color: '#eaeaf0',
-    display: 'flex',
-    height: 22,
-    alignItems: 'center',
-  },
-  active: {
+const QontoStepIconRoot = styled('div')(({ styleProps = {} }) => ({
+  color: '#eaeaf0',
+  display: 'flex',
+  height: 22,
+  alignItems: 'center',
+  ...(!!styleProps.active && {
     color: '#784af4',
+  }),
+  '& .QontoStepIcon-completedIcon': {
+    color: '#784af4',
+    zIndex: 1,
+    fontSize: 18,
   },
-  circle: {
+  '& .QontoStepIcon-circle': {
     width: 8,
     height: 8,
     borderRadius: '50%',
     backgroundColor: 'currentColor',
   },
-  completed: {
-    color: '#784af4',
-    zIndex: 1,
-    fontSize: 18,
-  },
-});
+}));
 
 function QontoStepIcon(props: StepIconProps) {
-  const classes = useQontoStepIconStyles();
-  const { active, completed } = props;
+  const { active, completed, className } = props;
 
   return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-      })}
-    >
+    <QontoStepIconRoot styleProps={{ active }} className={className}>
       {completed ? (
-        <Check className={classes.completed} />
+        <Check className="QontoStepIcon-completedIcon" />
       ) : (
-        <div className={classes.circle} />
+        <div className="QontoStepIcon-circle" />
       )}
-    </div>
+    </QontoStepIconRoot>
   );
 }
 
-const ColorlibConnector = withStyles({
-  alternativeLabel: {
+const ColorlibConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 22,
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
         'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
         'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     height: 3,
     border: 0,
     backgroundColor: '#eaeaf0',
     borderRadius: 1,
   },
-})(StepConnector);
+});
 
-const useColorlibStepIconStyles = makeStyles({
-  root: {
-    backgroundColor: '#ccc',
-    zIndex: 1,
-    color: '#fff',
-    width: 50,
-    height: 50,
-    display: 'flex',
-    borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  active: {
+const ColorlibStepIconRoot = styled('div')(({ styleProps = {} }) => ({
+  backgroundColor: '#ccc',
+  zIndex: 1,
+  color: '#fff',
+  width: 50,
+  height: 50,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(!!styleProps.active && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
     boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
-  },
-  completed: {
+  }),
+  ...(!!styleProps.completed && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
-  },
-});
+  }),
+}));
 
 function ColorlibStepIcon(props: StepIconProps) {
-  const classes = useColorlibStepIconStyles();
-  const { active, completed } = props;
+  const { active, completed, className } = props;
 
   const icons: { [index: string]: React.ReactElement } = {
     1: <SettingsIcon />,
@@ -143,29 +126,22 @@ function ColorlibStepIcon(props: StepIconProps) {
   };
 
   return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-        [classes.completed]: completed,
-      })}
-    >
+    <ColorlibStepIconRoot styleProps={{ completed, active }} className={className}>
       {icons[String(props.icon)]}
-    </div>
+    </ColorlibStepIconRoot>
   );
 }
 
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function CustomizedSteppers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper
         alternativeLabel
         activeStep={1}
         connector={<QontoConnector />}
-        className={classes.quontoStepper}
+        sx={{ mb: 4 }}
       >
         {steps.map((label) => (
           <Step key={label}>
@@ -180,6 +156,6 @@ export default function CustomizedSteppers() {
           </Step>
         ))}
       </Stepper>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/DotsMobileStepper.js b/docs/src/pages/components/steppers/DotsMobileStepper.js
index ebdddbb5e17ac6..0f92f280922808 100644
--- a/docs/src/pages/components/steppers/DotsMobileStepper.js
+++ b/docs/src/pages/components/steppers/DotsMobileStepper.js
@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Button from '@material-ui/core/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-});
-
 export default function DotsMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
 
@@ -31,7 +23,7 @@ export default function DotsMobileStepper() {
       steps={6}
       position="static"
       activeStep={activeStep}
-      className={classes.root}
+      sx={{ maxWidth: 400, flexGrow: 1 }}
       nextButton={
         <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
           Next
diff --git a/docs/src/pages/components/steppers/DotsMobileStepper.tsx b/docs/src/pages/components/steppers/DotsMobileStepper.tsx
index ebdddbb5e17ac6..0f92f280922808 100644
--- a/docs/src/pages/components/steppers/DotsMobileStepper.tsx
+++ b/docs/src/pages/components/steppers/DotsMobileStepper.tsx
@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Button from '@material-ui/core/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-});
-
 export default function DotsMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
 
@@ -31,7 +23,7 @@ export default function DotsMobileStepper() {
       steps={6}
       position="static"
       activeStep={activeStep}
-      className={classes.root}
+      sx={{ maxWidth: 400, flexGrow: 1 }}
       nextButton={
         <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
           Next
diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js
index 3052f2182e7a53..9a0672bdae3935 100644
--- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js
+++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js
@@ -1,15 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-});
-
 const steps = [
   'Select master blaster campaign settings',
   'Create an ad group',
@@ -17,10 +11,8 @@ const steps = [
 ];
 
 export default function HorizontalLabelPositionBelowStepper() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper activeStep={1} alternativeLabel>
         {steps.map((label) => (
           <Step key={label}>
@@ -28,6 +20,6 @@ export default function HorizontalLabelPositionBelowStepper() {
           </Step>
         ))}
       </Stepper>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx
index 3052f2182e7a53..9a0672bdae3935 100644
--- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx
+++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx
@@ -1,15 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-});
-
 const steps = [
   'Select master blaster campaign settings',
   'Create an ad group',
@@ -17,10 +11,8 @@ const steps = [
 ];
 
 export default function HorizontalLabelPositionBelowStepper() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper activeStep={1} alternativeLabel>
         {steps.map((label) => (
           <Step key={label}>
@@ -28,6 +20,6 @@ export default function HorizontalLabelPositionBelowStepper() {
           </Step>
         ))}
       </Stepper>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js
index 0f2eb1c36b4ed3..154ce31b70bbc1 100644
--- a/docs/src/pages/components/steppers/HorizontalLinearStepper.js
+++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.js
@@ -1,36 +1,14 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  buttonWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '16px 0 0',
-  },
-  button: {
-    marginRight: theme.spacing(1),
-  },
-  spacer: {
-    flex: '1 1 auto',
-  },
-  instructions: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalLinearStepper() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set());
 
@@ -77,7 +55,7 @@ export default function HorizontalLinearStepper() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper activeStep={activeStep}>
         {steps.map((label, index) => {
           const stepProps = {};
@@ -99,35 +77,29 @@ export default function HorizontalLinearStepper() {
       </Stepper>
       {activeStep === steps.length ? (
         <React.Fragment>
-          <Typography className={classes.instructions}>
+          <Typography sx={{ mt: 2, mb: 1 }}>
             All steps completed - you&apos;re finished
           </Typography>
-          <div className={classes.buttonWrapper}>
-            <div className={classes.spacer} />
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+            <Box sx={{ flex: '1 1 auto' }} />
             <Button onClick={handleReset}>Reset</Button>
-          </div>
+          </Box>
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <Typography className={classes.instructions}>
-            Step {activeStep + 1}
-          </Typography>
-          <div className={classes.buttonWrapper}>
+          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
             <Button
               color="inherit"
               disabled={activeStep === 0}
               onClick={handleBack}
-              className={classes.button}
+              sx={{ mr: 1 }}
             >
               Back
             </Button>
-            <div className={classes.spacer} />
+            <Box sx={{ flex: '1 1 auto' }} />
             {isStepOptional(activeStep) && (
-              <Button
-                color="inherit"
-                onClick={handleSkip}
-                className={classes.button}
-              >
+              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
                 Skip
               </Button>
             )}
@@ -135,9 +107,9 @@ export default function HorizontalLinearStepper() {
             <Button onClick={handleNext}>
               {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
             </Button>
-          </div>
+          </Box>
         </React.Fragment>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx
index c1637f073f4c28..9fcb094f3bf9b7 100644
--- a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx
+++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx
@@ -1,36 +1,14 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-  },
-  buttonWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '16px 0 0',
-  },
-  button: {
-    marginRight: theme.spacing(1),
-  },
-  spacer: {
-    flex: '1 1 auto',
-  },
-  instructions: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalLinearStepper() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set<number>());
 
@@ -77,7 +55,7 @@ export default function HorizontalLinearStepper() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper activeStep={activeStep}>
         {steps.map((label, index) => {
           const stepProps: { completed?: boolean } = {};
@@ -101,44 +79,38 @@ export default function HorizontalLinearStepper() {
       </Stepper>
       {activeStep === steps.length ? (
         <React.Fragment>
-          <Typography className={classes.instructions}>
+          <Typography sx={{ mt: 2, mb: 1 }}>
             All steps completed - you&apos;re finished
           </Typography>
-          <div className={classes.buttonWrapper}>
-            <div className={classes.spacer} />
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+            <Box sx={{ flex: '1 1 auto' }} />
             <Button onClick={handleReset}>Reset</Button>
-          </div>
+          </Box>
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <Typography className={classes.instructions}>
-            Step {activeStep + 1}
-          </Typography>
-          <div className={classes.buttonWrapper}>
+          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
             <Button
               color="inherit"
               disabled={activeStep === 0}
               onClick={handleBack}
-              className={classes.button}
+              sx={{ mr: 1 }}
             >
               Back
             </Button>
-            <div className={classes.spacer} />
+            <Box sx={{ flex: '1 1 auto' }} />
             {isStepOptional(activeStep) && (
-              <Button
-                color="inherit"
-                onClick={handleSkip}
-                className={classes.button}
-              >
+              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
                 Skip
               </Button>
             )}
             <Button onClick={handleNext}>
               {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
             </Button>
-          </div>
+          </Box>
         </React.Fragment>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js
index 35ddfd00fb44e5..07292829b51f7d 100644
--- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js
+++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js
@@ -1,39 +1,14 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepButton from '@material-ui/core/StepButton';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  buttonWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '16px 0 0',
-  },
-  button: {
-    marginRight: theme.spacing(1),
-  },
-  spacer: {
-    flex: '1 1 auto',
-  },
-  completed: {
-    display: 'inline-block',
-  },
-  instructions: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalNonLinearStepper() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const [completed, setCompleted] = React.useState({});
 
@@ -84,7 +59,7 @@ export default function HorizontalNonLinearStepper() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper nonLinear activeStep={activeStep}>
         {steps.map((label, index) => (
           <Step key={label} completed={completed[index]}>
@@ -97,35 +72,33 @@ export default function HorizontalNonLinearStepper() {
       <div>
         {allStepsCompleted() ? (
           <React.Fragment>
-            <Typography className={classes.instructions}>
+            <Typography sx={{ mt: 2, mb: 1 }}>
               All steps completed - you&apos;re finished
             </Typography>
-            <div className={classes.buttonWrapper}>
-              <div className={classes.spacer} />
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Box sx={{ flex: '1 1 auto' }} />
               <Button onClick={handleReset}>Reset</Button>
-            </div>
+            </Box>
           </React.Fragment>
         ) : (
           <React.Fragment>
-            <Typography className={classes.instructions}>
-              Step {activeStep + 1}
-            </Typography>
-            <div className={classes.buttonWrapper}>
+            <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
               <Button
                 color="inherit"
                 disabled={activeStep === 0}
                 onClick={handleBack}
-                className={classes.button}
+                sx={{ mr: 1 }}
               >
                 Back
               </Button>
-              <div className={classes.spacer} />
-              <Button onClick={handleNext} className={classes.button}>
+              <Box sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleNext} sx={{ mr: 1 }}>
                 Next
               </Button>
               {activeStep !== steps.length &&
                 (completed[activeStep] ? (
-                  <Typography variant="caption" className={classes.completed}>
+                  <Typography variant="caption" sx={{ display: 'inline-block' }}>
                     Step {activeStep + 1} already completed
                   </Typography>
                 ) : (
@@ -135,10 +108,10 @@ export default function HorizontalNonLinearStepper() {
                       : 'Complete Step'}
                   </Button>
                 ))}
-            </div>
+            </Box>
           </React.Fragment>
         )}
       </div>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx
index 6ab1e58c7e74ec..68f2c180a70dd2 100644
--- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx
+++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx
@@ -1,39 +1,14 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepButton from '@material-ui/core/StepButton';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-  },
-  buttonWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    padding: '16px 0 0',
-  },
-  button: {
-    marginRight: theme.spacing(1),
-  },
-  spacer: {
-    flex: '1 1 auto',
-  },
-  completed: {
-    display: 'inline-block',
-  },
-  instructions: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalNonLinearStepper() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const [completed, setCompleted] = React.useState<{
     [k: number]: boolean;
@@ -86,7 +61,7 @@ export default function HorizontalNonLinearStepper() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper nonLinear activeStep={activeStep}>
         {steps.map((label, index) => (
           <Step key={label} completed={completed[index]}>
@@ -99,35 +74,33 @@ export default function HorizontalNonLinearStepper() {
       <div>
         {allStepsCompleted() ? (
           <React.Fragment>
-            <Typography className={classes.instructions}>
+            <Typography sx={{ mt: 2, mb: 1 }}>
               All steps completed - you&apos;re finished
             </Typography>
-            <div className={classes.buttonWrapper}>
-              <div className={classes.spacer} />
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Box sx={{ flex: '1 1 auto' }} />
               <Button onClick={handleReset}>Reset</Button>
-            </div>
+            </Box>
           </React.Fragment>
         ) : (
           <React.Fragment>
-            <Typography className={classes.instructions}>
-              Step {activeStep + 1}
-            </Typography>
-            <div className={classes.buttonWrapper}>
+            <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
               <Button
                 color="inherit"
                 disabled={activeStep === 0}
                 onClick={handleBack}
-                className={classes.button}
+                sx={{ mr: 1 }}
               >
                 Back
               </Button>
-              <div className={classes.spacer} />
-              <Button onClick={handleNext} className={classes.button}>
+              <Box sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleNext} sx={{ mr: 1 }}>
                 Next
               </Button>
               {activeStep !== steps.length &&
                 (completed[activeStep] ? (
-                  <Typography variant="caption" className={classes.completed}>
+                  <Typography variant="caption" sx={{ display: 'inline-block' }}>
                     Step {activeStep + 1} already completed
                   </Typography>
                 ) : (
@@ -137,10 +110,10 @@ export default function HorizontalNonLinearStepper() {
                       : 'Complete Step'}
                   </Button>
                 ))}
-            </div>
+            </Box>
           </React.Fragment>
         )}
       </div>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalStepperWithError.js b/docs/src/pages/components/steppers/HorizontalStepperWithError.js
index df4901139e7b25..a8e7a291900857 100644
--- a/docs/src/pages/components/steppers/HorizontalStepperWithError.js
+++ b/docs/src/pages/components/steppers/HorizontalStepperWithError.js
@@ -1,27 +1,19 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-});
-
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalStepperWithError() {
-  const classes = useStyles();
-
   const isStepFailed = (step) => {
     return step === 1;
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper activeStep={1}>
         {steps.map((label, index) => {
           const labelProps = {};
@@ -42,6 +34,6 @@ export default function HorizontalStepperWithError() {
           );
         })}
       </Stepper>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx b/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx
index 48683145125ca7..a711229c51649a 100644
--- a/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx
+++ b/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx
@@ -1,27 +1,19 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-});
-
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function HorizontalStepperWithError() {
-  const classes = useStyles();
-
   const isStepFailed = (step: number) => {
     return step === 1;
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper activeStep={1}>
         {steps.map((label, index) => {
           const labelProps: {
@@ -44,6 +36,6 @@ export default function HorizontalStepperWithError() {
           );
         })}
       </Stepper>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/ProgressMobileStepper.js b/docs/src/pages/components/steppers/ProgressMobileStepper.js
index 76a120e74a62c7..f5045a407968b6 100644
--- a/docs/src/pages/components/steppers/ProgressMobileStepper.js
+++ b/docs/src/pages/components/steppers/ProgressMobileStepper.js
@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Button from '@material-ui/core/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-});
-
 export default function ProgressMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
 
@@ -31,7 +23,7 @@ export default function ProgressMobileStepper() {
       steps={6}
       position="static"
       activeStep={activeStep}
-      className={classes.root}
+      sx={{ maxWidth: 400, flexGrow: 1 }}
       nextButton={
         <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
           Next
diff --git a/docs/src/pages/components/steppers/ProgressMobileStepper.tsx b/docs/src/pages/components/steppers/ProgressMobileStepper.tsx
index 76a120e74a62c7..f5045a407968b6 100644
--- a/docs/src/pages/components/steppers/ProgressMobileStepper.tsx
+++ b/docs/src/pages/components/steppers/ProgressMobileStepper.tsx
@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Button from '@material-ui/core/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-});
-
 export default function ProgressMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
 
@@ -31,7 +23,7 @@ export default function ProgressMobileStepper() {
       steps={6}
       position="static"
       activeStep={activeStep}
-      className={classes.root}
+      sx={{ maxWidth: 400, flexGrow: 1 }}
       nextButton={
         <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
           Next
diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js
index 15ace2118184f9..822604f4075899 100644
--- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js
+++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
@@ -34,29 +35,7 @@ const images = [
   },
 ];
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 50,
-    paddingLeft: theme.spacing(2),
-    backgroundColor: theme.palette.background.default,
-  },
-  img: {
-    height: 255,
-    display: 'block',
-    maxWidth: 400,
-    overflow: 'hidden',
-    width: '100%',
-  },
-}));
-
 function SwipeableTextMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
   const maxSteps = images.length;
@@ -74,8 +53,18 @@ function SwipeableTextMobileStepper() {
   };
 
   return (
-    <div className={classes.root}>
-      <Paper square elevation={0} className={classes.header}>
+    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
+      <Paper
+        square
+        elevation={0}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: 50,
+          pl: 2,
+          bgcolor: 'background.default',
+        }}
+      >
         <Typography>{images[activeStep].label}</Typography>
       </Paper>
       <AutoPlaySwipeableViews
@@ -87,7 +76,18 @@ function SwipeableTextMobileStepper() {
         {images.map((step, index) => (
           <div key={step.label}>
             {Math.abs(activeStep - index) <= 2 ? (
-              <img className={classes.img} src={step.imgPath} alt={step.label} />
+              <Box
+                component="img"
+                sx={{
+                  height: 255,
+                  display: 'block',
+                  maxWidth: 400,
+                  overflow: 'hidden',
+                  width: '100%',
+                }}
+                src={step.imgPath}
+                alt={step.label}
+              />
             ) : null}
           </div>
         ))}
@@ -121,7 +121,7 @@ function SwipeableTextMobileStepper() {
           </Button>
         }
       />
-    </div>
+    </Box>
   );
 }
 
diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx
index 762cd27f431a93..b5675ba95525b5 100644
--- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx
+++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
@@ -34,29 +35,7 @@ const images = [
   },
 ];
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 50,
-    paddingLeft: theme.spacing(2),
-    backgroundColor: theme.palette.background.default,
-  },
-  img: {
-    height: 255,
-    display: 'block',
-    maxWidth: 400,
-    overflow: 'hidden',
-    width: '100%',
-  },
-}));
-
 function SwipeableTextMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
   const maxSteps = images.length;
@@ -74,8 +53,18 @@ function SwipeableTextMobileStepper() {
   };
 
   return (
-    <div className={classes.root}>
-      <Paper square elevation={0} className={classes.header}>
+    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
+      <Paper
+        square
+        elevation={0}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: 50,
+          pl: 2,
+          bgcolor: 'background.default',
+        }}
+      >
         <Typography>{images[activeStep].label}</Typography>
       </Paper>
       <AutoPlaySwipeableViews
@@ -87,7 +76,18 @@ function SwipeableTextMobileStepper() {
         {images.map((step, index) => (
           <div key={step.label}>
             {Math.abs(activeStep - index) <= 2 ? (
-              <img className={classes.img} src={step.imgPath} alt={step.label} />
+              <Box
+                component="img"
+                sx={{
+                  height: 255,
+                  display: 'block',
+                  maxWidth: 400,
+                  overflow: 'hidden',
+                  width: '100%',
+                }}
+                src={step.imgPath}
+                alt={step.label}
+              />
             ) : null}
           </div>
         ))}
@@ -121,7 +121,7 @@ function SwipeableTextMobileStepper() {
           </Button>
         }
       />
-    </div>
+    </Box>
   );
 }
 
diff --git a/docs/src/pages/components/steppers/TextMobileStepper.js b/docs/src/pages/components/steppers/TextMobileStepper.js
index 7446480ae5e8ce..0c7287d27ab500 100644
--- a/docs/src/pages/components/steppers/TextMobileStepper.js
+++ b/docs/src/pages/components/steppers/TextMobileStepper.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
@@ -7,26 +8,6 @@ import Button from '@material-ui/core/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 50,
-    paddingLeft: theme.spacing(2),
-    backgroundColor: theme.palette.background.default,
-  },
-  stepContent: {
-    height: 255,
-    maxWidth: 400,
-    width: '100%',
-    padding: theme.spacing(2),
-  },
-}));
-
 const steps = [
   {
     label: 'Select campaign settings',
@@ -49,7 +30,6 @@ const steps = [
 ];
 
 export default function TextMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
   const maxSteps = steps.length;
@@ -63,11 +43,23 @@ export default function TextMobileStepper() {
   };
 
   return (
-    <div className={classes.root}>
-      <Paper square elevation={0} className={classes.header}>
+    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
+      <Paper
+        square
+        elevation={0}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: 50,
+          pl: 2,
+          bgcolor: 'background.default',
+        }}
+      >
         <Typography>{steps[activeStep].label}</Typography>
       </Paper>
-      <div className={classes.stepContent}>{steps[activeStep].description}</div>
+      <Box sx={{ height: 255, maxWidth: 400, width: '100%', p: 2 }}>
+        {steps[activeStep].description}
+      </Box>
       <MobileStepper
         steps={maxSteps}
         position="static"
@@ -97,6 +89,6 @@ export default function TextMobileStepper() {
           </Button>
         }
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/TextMobileStepper.tsx b/docs/src/pages/components/steppers/TextMobileStepper.tsx
index d2ff2037eed7ff..0c7287d27ab500 100644
--- a/docs/src/pages/components/steppers/TextMobileStepper.tsx
+++ b/docs/src/pages/components/steppers/TextMobileStepper.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
@@ -7,26 +8,6 @@ import Button from '@material-ui/core/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    maxWidth: 400,
-    flexGrow: 1,
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 50,
-    paddingLeft: theme.spacing(2),
-    backgroundColor: theme.palette.background.default,
-  },
-  stepContent: {
-    height: 255,
-    maxWidth: 400,
-    width: '100%',
-    padding: theme.spacing(2),
-  },
-}));
-
 const steps = [
   {
     label: 'Select campaign settings',
@@ -49,7 +30,6 @@ const steps = [
 ];
 
 export default function TextMobileStepper() {
-  const classes = useStyles();
   const theme = useTheme();
   const [activeStep, setActiveStep] = React.useState(0);
   const maxSteps = steps.length;
@@ -63,11 +43,23 @@ export default function TextMobileStepper() {
   };
 
   return (
-    <div className={classes.root}>
-      <Paper square elevation={0} className={classes.header}>
+    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
+      <Paper
+        square
+        elevation={0}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: 50,
+          pl: 2,
+          bgcolor: 'background.default',
+        }}
+      >
         <Typography>{steps[activeStep].label}</Typography>
       </Paper>
-      <div className={classes.stepContent}>{steps[activeStep].description}</div>
+      <Box sx={{ height: 255, maxWidth: 400, width: '100%', p: 2 }}>
+        {steps[activeStep].description}
+      </Box>
       <MobileStepper
         steps={maxSteps}
         position="static"
@@ -97,6 +89,6 @@ export default function TextMobileStepper() {
           </Button>
         }
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.js b/docs/src/pages/components/steppers/VerticalLinearStepper.js
index 99a9ebdbc63592..490b71caef4f15 100644
--- a/docs/src/pages/components/steppers/VerticalLinearStepper.js
+++ b/docs/src/pages/components/steppers/VerticalLinearStepper.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 Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
@@ -8,22 +8,6 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    maxWidth: 400,
-  },
-  button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  },
-  actionsContainer: {
-    marginBottom: theme.spacing(2),
-  },
-  resetContainer: {
-    padding: theme.spacing(3),
-  },
-}));
-
 const steps = [
   {
     label: 'Select campaign settings',
@@ -46,7 +30,6 @@ const steps = [
 ];
 
 export default function VerticalLinearStepper() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
 
   const handleNext = () => {
@@ -62,7 +45,7 @@ export default function VerticalLinearStepper() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ maxWidth: 400 }}>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps.map((step, index) => (
           <Step key={step.label}>
@@ -77,36 +60,36 @@ export default function VerticalLinearStepper() {
             </StepLabel>
             <StepContent>
               <Typography>{step.description}</Typography>
-              <div className={classes.actionsContainer}>
+              <Box sx={{ mb: 2 }}>
                 <div>
                   <Button
                     variant="contained"
                     onClick={handleNext}
-                    className={classes.button}
+                    sx={{ mt: 1, mr: 1 }}
                   >
                     {index === steps.length - 1 ? 'Finish' : 'Continue'}
                   </Button>
                   <Button
                     disabled={index === 0}
                     onClick={handleBack}
-                    className={classes.button}
+                    sx={{ mt: 1, mr: 1 }}
                   >
                     Back
                   </Button>
                 </div>
-              </div>
+              </Box>
             </StepContent>
           </Step>
         ))}
       </Stepper>
       {activeStep === steps.length && (
-        <Paper square elevation={0} className={classes.resetContainer}>
+        <Paper square elevation={0} sx={{ p: 3 }}>
           <Typography>All steps completed - you&apos;re finished</Typography>
-          <Button onClick={handleReset} className={classes.button}>
+          <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
             Reset
           </Button>
         </Paper>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx b/docs/src/pages/components/steppers/VerticalLinearStepper.tsx
index e923ee6b85a0ac..490b71caef4f15 100644
--- a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx
+++ b/docs/src/pages/components/steppers/VerticalLinearStepper.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 Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
@@ -8,22 +8,6 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    maxWidth: 400,
-  },
-  button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  },
-  actionsContainer: {
-    marginBottom: theme.spacing(2),
-  },
-  resetContainer: {
-    padding: theme.spacing(3),
-  },
-}));
-
 const steps = [
   {
     label: 'Select campaign settings',
@@ -46,7 +30,6 @@ const steps = [
 ];
 
 export default function VerticalLinearStepper() {
-  const classes = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
 
   const handleNext = () => {
@@ -62,7 +45,7 @@ export default function VerticalLinearStepper() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ maxWidth: 400 }}>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps.map((step, index) => (
           <Step key={step.label}>
@@ -77,36 +60,36 @@ export default function VerticalLinearStepper() {
             </StepLabel>
             <StepContent>
               <Typography>{step.description}</Typography>
-              <div className={classes.actionsContainer}>
+              <Box sx={{ mb: 2 }}>
                 <div>
                   <Button
                     variant="contained"
                     onClick={handleNext}
-                    className={classes.button}
+                    sx={{ mt: 1, mr: 1 }}
                   >
                     {index === steps.length - 1 ? 'Finish' : 'Continue'}
                   </Button>
                   <Button
                     disabled={index === 0}
                     onClick={handleBack}
-                    className={classes.button}
+                    sx={{ mt: 1, mr: 1 }}
                   >
                     Back
                   </Button>
                 </div>
-              </div>
+              </Box>
             </StepContent>
           </Step>
         ))}
       </Stepper>
       {activeStep === steps.length && (
-        <Paper square elevation={0} className={classes.resetContainer}>
+        <Paper square elevation={0} sx={{ p: 3 }}>
           <Typography>All steps completed - you&apos;re finished</Typography>
-          <Button onClick={handleReset} className={classes.button}>
+          <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
             Reset
           </Button>
         </Paper>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.js b/docs/src/pages/components/tooltips/CustomizedTooltips.js
index 99681bd9835963..70f6176dccb16e 100644
--- a/docs/src/pages/components/tooltips/CustomizedTooltips.js
+++ b/docs/src/pages/components/tooltips/CustomizedTooltips.js
@@ -1,42 +1,42 @@
 import * as React from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip, { tooltipClasses } from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 
-const LightTooltip = withStyles((theme) => ({
-  tooltip: {
+const LightTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.common.white,
     color: 'rgba(0, 0, 0, 0.87)',
     boxShadow: theme.shadows[1],
     fontSize: 11,
   },
-}))(Tooltip);
+}));
 
-const useStylesBootstrap = makeStyles((theme) => ({
-  arrow: {
+const BootstrapTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} arrow classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: {
     color: theme.palette.common.black,
   },
-  tooltip: {
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.common.black,
   },
 }));
 
-function BootstrapTooltip(props) {
-  const classes = useStylesBootstrap();
-
-  return <Tooltip arrow classes={classes} {...props} />;
-}
-
-const HtmlTooltip = withStyles((theme) => ({
-  tooltip: {
+const HtmlTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#f5f5f9',
     color: 'rgba(0, 0, 0, 0.87)',
     maxWidth: 220,
     fontSize: theme.typography.pxToRem(12),
     border: '1px solid #dadde9',
   },
-}))(Tooltip);
+}));
 
 export default function CustomizedTooltips() {
   return (
diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
index 8a0881a0d93791..e41df7218271b4 100644
--- a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
+++ b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
@@ -1,42 +1,42 @@
 import * as React from 'react';
-import { withStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
+import Tooltip, { TooltipProps, tooltipClasses } from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 
-const LightTooltip = withStyles((theme: Theme) => ({
-  tooltip: {
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.common.white,
     color: 'rgba(0, 0, 0, 0.87)',
     boxShadow: theme.shadows[1],
     fontSize: 11,
   },
-}))(Tooltip);
+}));
 
-const useStylesBootstrap = makeStyles((theme: Theme) => ({
-  arrow: {
+const BootstrapTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} arrow classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: {
     color: theme.palette.common.black,
   },
-  tooltip: {
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.common.black,
   },
 }));
 
-function BootstrapTooltip(props: TooltipProps) {
-  const classes = useStylesBootstrap();
-
-  return <Tooltip arrow classes={classes} {...props} />;
-}
-
-const HtmlTooltip = withStyles((theme: Theme) => ({
-  tooltip: {
+const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#f5f5f9',
     color: 'rgba(0, 0, 0, 0.87)',
     maxWidth: 220,
     fontSize: theme.typography.pxToRem(12),
     border: '1px solid #dadde9',
   },
-}))(Tooltip);
+}));
 
 export default function CustomizedTooltips() {
   return (
diff --git a/docs/src/pages/components/tooltips/PositionedTooltips.js b/docs/src/pages/components/tooltips/PositionedTooltips.js
index 91d1dbb486a632..b5102bd9398cb8 100644
--- a/docs/src/pages/components/tooltips/PositionedTooltips.js
+++ b/docs/src/pages/components/tooltips/PositionedTooltips.js
@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 
-const useStyles = makeStyles({
-  root: {
-    width: 500,
-  },
-});
-
 export default function PositionedTooltips() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: 500 }}>
       <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="top-start">
@@ -73,6 +65,6 @@ export default function PositionedTooltips() {
           </Tooltip>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tooltips/PositionedTooltips.tsx b/docs/src/pages/components/tooltips/PositionedTooltips.tsx
index 91d1dbb486a632..b5102bd9398cb8 100644
--- a/docs/src/pages/components/tooltips/PositionedTooltips.tsx
+++ b/docs/src/pages/components/tooltips/PositionedTooltips.tsx
@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 
-const useStyles = makeStyles({
-  root: {
-    width: 500,
-  },
-});
-
 export default function PositionedTooltips() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: 500 }}>
       <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="top-start">
@@ -73,6 +65,6 @@ export default function PositionedTooltips() {
           </Tooltip>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tooltips/VariableWidth.js b/docs/src/pages/components/tooltips/VariableWidth.js
index ec79a64fc49e81..b31f751ba708a4 100644
--- a/docs/src/pages/components/tooltips/VariableWidth.js
+++ b/docs/src/pages/components/tooltips/VariableWidth.js
@@ -1,19 +1,23 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip, { tooltipClasses } from '@material-ui/core/Tooltip';
 
-const useStyles = makeStyles((theme) => ({
-  button: {
-    margin: theme.spacing(1),
-  },
-  customWidth: {
+const CustomWidthTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
     maxWidth: 500,
   },
-  noMaxWidth: {
+});
+
+const NoMaxWidthTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
     maxWidth: 'none',
   },
-}));
+});
 
 const longText = `
 Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
@@ -22,19 +26,17 @@ Nullam eget est sed sem iaculis gravida eget vitae justo.
 `;
 
 export default function VariableWidth() {
-  const classes = useStyles();
-
   return (
     <div>
       <Tooltip title={longText}>
-        <Button className={classes.button}>Default Width [300px]</Button>
-      </Tooltip>
-      <Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
-        <Button className={classes.button}>Custom Width [500px]</Button>
-      </Tooltip>
-      <Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>
-        <Button className={classes.button}>No wrapping</Button>
+        <Button sx={{ m: 1 }}>Default Width [300px]</Button>
       </Tooltip>
+      <CustomWidthTooltip title={longText}>
+        <Button sx={{ m: 1 }}>Custom Width [500px]</Button>
+      </CustomWidthTooltip>
+      <NoMaxWidthTooltip title={longText}>
+        <Button sx={{ m: 1 }}>No wrapping</Button>
+      </NoMaxWidthTooltip>
     </div>
   );
 }
diff --git a/docs/src/pages/components/tooltips/VariableWidth.tsx b/docs/src/pages/components/tooltips/VariableWidth.tsx
index 5280055a99289e..49f6d77a4158c8 100644
--- a/docs/src/pages/components/tooltips/VariableWidth.tsx
+++ b/docs/src/pages/components/tooltips/VariableWidth.tsx
@@ -1,19 +1,23 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip, { TooltipProps, tooltipClasses } from '@material-ui/core/Tooltip';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  button: {
-    margin: theme.spacing(1),
-  },
-  customWidth: {
+const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
     maxWidth: 500,
   },
-  noMaxWidth: {
+});
+
+const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))({
+  [`& .${tooltipClasses.tooltip}`]: {
     maxWidth: 'none',
   },
-}));
+});
 
 const longText = `
 Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
@@ -22,19 +26,17 @@ Nullam eget est sed sem iaculis gravida eget vitae justo.
 `;
 
 export default function VariableWidth() {
-  const classes = useStyles();
-
   return (
     <div>
       <Tooltip title={longText}>
-        <Button className={classes.button}>Default Width [300px]</Button>
-      </Tooltip>
-      <Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
-        <Button className={classes.button}>Custom Width [500px]</Button>
-      </Tooltip>
-      <Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>
-        <Button className={classes.button}>No wrapping</Button>
+        <Button sx={{ m: 1 }}>Default Width [300px]</Button>
       </Tooltip>
+      <CustomWidthTooltip title={longText}>
+        <Button sx={{ m: 1 }}>Custom Width [500px]</Button>
+      </CustomWidthTooltip>
+      <NoMaxWidthTooltip title={longText}>
+        <Button sx={{ m: 1 }}>No wrapping</Button>
+      </NoMaxWidthTooltip>
     </div>
   );
 }