diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.js b/docs/src/pages/components/timeline/CustomizedTimeline.js
index bca3f6734448a4..d689e6412ec563 100644
--- a/docs/src/pages/components/timeline/CustomizedTimeline.js
+++ b/docs/src/pages/components/timeline/CustomizedTimeline.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
 import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
@@ -13,26 +12,12 @@ import HotelIcon from '@material-ui/icons/Hotel';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  timelineContent: {
-    padding: '12px 16px',
-  },
-  secondaryTail: {
-    backgroundColor: theme.palette.secondary.main,
-  },
-  verticallyCenterContent: {
-    margin: 'auto 0',
-  },
-}));
-
 export default function CustomizedTimeline() {
-  const classes = useStyles();
-
   return (
     <Timeline position="alternate">
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           align="right"
           variant="body2"
           color="text.secondary"
@@ -46,7 +31,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Eat
           </Typography>
@@ -55,7 +40,7 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           variant="body2"
           color="text.secondary"
         >
@@ -68,7 +53,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Code
           </Typography>
@@ -81,9 +66,9 @@ export default function CustomizedTimeline() {
           <TimelineDot color="primary" variant="outlined">
             <HotelIcon />
           </TimelineDot>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Sleep
           </Typography>
@@ -92,13 +77,13 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineSeparator>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
           <TimelineDot color="secondary">
             <RepeatIcon />
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Repeat
           </Typography>
diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.tsx b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
index bca3f6734448a4..d689e6412ec563 100644
--- a/docs/src/pages/components/timeline/CustomizedTimeline.tsx
+++ b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
 import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
@@ -13,26 +12,12 @@ import HotelIcon from '@material-ui/icons/Hotel';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  timelineContent: {
-    padding: '12px 16px',
-  },
-  secondaryTail: {
-    backgroundColor: theme.palette.secondary.main,
-  },
-  verticallyCenterContent: {
-    margin: 'auto 0',
-  },
-}));
-
 export default function CustomizedTimeline() {
-  const classes = useStyles();
-
   return (
     <Timeline position="alternate">
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           align="right"
           variant="body2"
           color="text.secondary"
@@ -46,7 +31,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Eat
           </Typography>
@@ -55,7 +40,7 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineOppositeContent
-          className={classes.verticallyCenterContent}
+          sx={{ m: 'auto 0' }}
           variant="body2"
           color="text.secondary"
         >
@@ -68,7 +53,7 @@ export default function CustomizedTimeline() {
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Code
           </Typography>
@@ -81,9 +66,9 @@ export default function CustomizedTimeline() {
           <TimelineDot color="primary" variant="outlined">
             <HotelIcon />
           </TimelineDot>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Sleep
           </Typography>
@@ -92,13 +77,13 @@ export default function CustomizedTimeline() {
       </TimelineItem>
       <TimelineItem>
         <TimelineSeparator>
-          <TimelineConnector className={classes.secondaryTail} />
+          <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
           <TimelineDot color="secondary">
             <RepeatIcon />
           </TimelineDot>
           <TimelineConnector />
         </TimelineSeparator>
-        <TimelineContent className={classes.timelineContent}>
+        <TimelineContent sx={{ py: '12px', px: 2 }}>
           <Typography variant="h6" component="span">
             Repeat
           </Typography>