From 556262c77039a4d04feff0865ff9db872149b48c Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 24 Mar 2021 19:03:14 -0300
Subject: [PATCH 1/5] docs: Migrate collapse demo to emotion

---
 .../components/transitions/SimpleCollapse.js  | 107 +++++++-----------
 .../components/transitions/SimpleCollapse.tsx | 107 +++++++-----------
 2 files changed, 87 insertions(+), 127 deletions(-)

diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js
index 8c44afb4a89e00..52642515032adc 100644
--- a/docs/src/pages/components/transitions/SimpleCollapse.js
+++ b/docs/src/pages/components/transitions/SimpleCollapse.js
@@ -1,39 +1,27 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Collapse from '@material-ui/core/Collapse';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 300,
-  },
-  container: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    height: 120,
-    width: 250,
-  },
-  halfWidth: {
-    width: '50%',
-  },
-  paper: {
-    margin: theme.spacing(1),
-  },
-  svg: {
-    width: 100,
-    height: 100,
-  },
-  polygon: {
-    fill: theme.palette.common.white,
-    stroke: theme.palette.divider,
-    strokeWidth: 1,
-  },
-}));
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
+);
 
 export default function SimpleCollapse() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -41,47 +29,40 @@ export default function SimpleCollapse() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 300 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Collapse in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Collapse>
-        <Collapse in={checked} collapsedSize={40}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Collapse>
-      </div>
-      <div className={classes.container}>
-        <div className={classes.halfWidth}>
-          <Collapse orientation="horizontal" in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
+      <Box
+        sx={{
+          '& > :not(style)': {
+            display: 'flex',
+            justifyContent: 'space-around',
+            height: 120,
+            width: 250,
+          },
+        }}
+      >
+        <div>
+          <Collapse in={checked}>{icon}</Collapse>
+          <Collapse in={checked} collapsedSize={40}>
+            {icon}
           </Collapse>
         </div>
-        <div className={classes.halfWidth}>
-          <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Collapse>
+        <div>
+          <Box sx={{ width: '50%' }}>
+            <Collapse orientation="horizontal" in={checked}>
+              {icon}
+            </Collapse>
+          </Box>
+          <Box sx={{ width: '50%' }}>
+            <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
+              {icon}
+            </Collapse>
+          </Box>
         </div>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx
index 171b05946f11c1..52642515032adc 100644
--- a/docs/src/pages/components/transitions/SimpleCollapse.tsx
+++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx
@@ -1,41 +1,27 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Collapse from '@material-ui/core/Collapse';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 300,
-    },
-    container: {
-      display: 'flex',
-      justifyContent: 'space-around',
-      height: 120,
-      width: 250,
-    },
-    halfWidth: {
-      width: '50%',
-    },
-    paper: {
-      margin: theme.spacing(1),
-    },
-    svg: {
-      width: 100,
-      height: 100,
-    },
-    polygon: {
-      fill: theme.palette.common.white,
-      stroke: theme.palette.divider,
-      strokeWidth: 1,
-    },
-  }),
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
 );
 
 export default function SimpleCollapse() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -43,47 +29,40 @@ export default function SimpleCollapse() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 300 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Collapse in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Collapse>
-        <Collapse in={checked} collapsedSize={40}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Collapse>
-      </div>
-      <div className={classes.container}>
-        <div className={classes.halfWidth}>
-          <Collapse orientation="horizontal" in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
+      <Box
+        sx={{
+          '& > :not(style)': {
+            display: 'flex',
+            justifyContent: 'space-around',
+            height: 120,
+            width: 250,
+          },
+        }}
+      >
+        <div>
+          <Collapse in={checked}>{icon}</Collapse>
+          <Collapse in={checked} collapsedSize={40}>
+            {icon}
           </Collapse>
         </div>
-        <div className={classes.halfWidth}>
-          <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Collapse>
+        <div>
+          <Box sx={{ width: '50%' }}>
+            <Collapse orientation="horizontal" in={checked}>
+              {icon}
+            </Collapse>
+          </Box>
+          <Box sx={{ width: '50%' }}>
+            <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
+              {icon}
+            </Collapse>
+          </Box>
         </div>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }

From 5553b3dcd06c722f987cd48b75fa5f466797c2b3 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 24 Mar 2021 19:03:26 -0300
Subject: [PATCH 2/5] docs: Migrate fade demo to emotion

---
 .../components/transitions/SimpleFade.js      | 54 ++++++++-----------
 .../components/transitions/SimpleFade.tsx     | 54 +++++++------------
 2 files changed, 41 insertions(+), 67 deletions(-)

diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js
index 4160c42a4a03c7..0ce9774e13815a 100644
--- a/docs/src/pages/components/transitions/SimpleFade.js
+++ b/docs/src/pages/components/transitions/SimpleFade.js
@@ -1,33 +1,27 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Fade from '@material-ui/core/Fade';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 180,
-  },
-  container: {
-    display: 'flex',
-  },
-  paper: {
-    margin: theme.spacing(1),
-  },
-  svg: {
-    width: 100,
-    height: 100,
-  },
-  polygon: {
-    fill: theme.palette.common.white,
-    stroke: theme.palette.divider,
-    strokeWidth: 1,
-  },
-}));
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
+);
 
 export default function SimpleFade() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -35,20 +29,14 @@ export default function SimpleFade() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 180 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Fade in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Fade>
-      </div>
-    </div>
+      <Box sx={{ display: 'flex' }}>
+        <Fade in={checked}>{icon}</Fade>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/transitions/SimpleFade.tsx b/docs/src/pages/components/transitions/SimpleFade.tsx
index 04b512d0378862..0ce9774e13815a 100644
--- a/docs/src/pages/components/transitions/SimpleFade.tsx
+++ b/docs/src/pages/components/transitions/SimpleFade.tsx
@@ -1,35 +1,27 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Fade from '@material-ui/core/Fade';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 180,
-    },
-    container: {
-      display: 'flex',
-    },
-    paper: {
-      margin: theme.spacing(1),
-    },
-    svg: {
-      width: 100,
-      height: 100,
-    },
-    polygon: {
-      fill: theme.palette.common.white,
-      stroke: theme.palette.divider,
-      strokeWidth: 1,
-    },
-  }),
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
 );
 
 export default function SimpleFade() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -37,20 +29,14 @@ export default function SimpleFade() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 180 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Fade in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Fade>
-      </div>
-    </div>
+      <Box sx={{ display: 'flex' }}>
+        <Fade in={checked}>{icon}</Fade>
+      </Box>
+    </Box>
   );
 }

From 2a893ffb178e181a609756d102f3a2257acc206c Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 24 Mar 2021 19:03:38 -0300
Subject: [PATCH 3/5] docs: Migrate grow demo to emotion

---
 .../components/transitions/SimpleGrow.js      | 60 +++++++------------
 .../components/transitions/SimpleGrow.tsx     | 60 +++++++------------
 2 files changed, 43 insertions(+), 77 deletions(-)

diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js
index 4cd65fce5dd4cb..f9743785aa6c3c 100644
--- a/docs/src/pages/components/transitions/SimpleGrow.js
+++ b/docs/src/pages/components/transitions/SimpleGrow.js
@@ -1,33 +1,27 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Grow from '@material-ui/core/Grow';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 180,
-  },
-  container: {
-    display: 'flex',
-  },
-  paper: {
-    margin: theme.spacing(1),
-  },
-  svg: {
-    width: 100,
-    height: 100,
-  },
-  polygon: {
-    fill: theme.palette.common.white,
-    stroke: theme.palette.divider,
-    strokeWidth: 1,
-  },
-}));
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
+);
 
 export default function SimpleGrow() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -35,32 +29,22 @@ export default function SimpleGrow() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 180 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Grow in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Grow>
+      <Box sx={{ display: 'flex' }}>
+        <Grow in={checked}>{icon}</Grow>
         {/* Conditionally applies the timeout prop to change the entry speed. */}
         <Grow
           in={checked}
           style={{ transformOrigin: '0 0 0' }}
           {...(checked ? { timeout: 1000 } : {})}
         >
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
+          {icon}
         </Grow>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/transitions/SimpleGrow.tsx b/docs/src/pages/components/transitions/SimpleGrow.tsx
index 83fbfda67712d8..f9743785aa6c3c 100644
--- a/docs/src/pages/components/transitions/SimpleGrow.tsx
+++ b/docs/src/pages/components/transitions/SimpleGrow.tsx
@@ -1,35 +1,27 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Grow from '@material-ui/core/Grow';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 180,
-    },
-    container: {
-      display: 'flex',
-    },
-    paper: {
-      margin: theme.spacing(1),
-    },
-    svg: {
-      width: 100,
-      height: 100,
-    },
-    polygon: {
-      fill: theme.palette.common.white,
-      stroke: theme.palette.divider,
-      strokeWidth: 1,
-    },
-  }),
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
 );
 
 export default function SimpleGrow() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -37,32 +29,22 @@ export default function SimpleGrow() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 180 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Grow in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Grow>
+      <Box sx={{ display: 'flex' }}>
+        <Grow in={checked}>{icon}</Grow>
         {/* Conditionally applies the timeout prop to change the entry speed. */}
         <Grow
           in={checked}
           style={{ transformOrigin: '0 0 0' }}
           {...(checked ? { timeout: 1000 } : {})}
         >
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
+          {icon}
         </Grow>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }

From c1d816fb5f5fe2a736fc35f3d0051fbf65864675 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 24 Mar 2021 19:03:47 -0300
Subject: [PATCH 4/5] docs: Migrate slide demo to emotion

---
 .../components/transitions/SimpleSlide.js     | 54 ++++++++-----------
 .../components/transitions/SimpleSlide.tsx    | 54 +++++++------------
 2 files changed, 41 insertions(+), 67 deletions(-)

diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js
index 5bb5ad4790e67b..62e061328327c4 100644
--- a/docs/src/pages/components/transitions/SimpleSlide.js
+++ b/docs/src/pages/components/transitions/SimpleSlide.js
@@ -1,35 +1,27 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Slide from '@material-ui/core/Slide';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 180,
-  },
-  wrapper: {
-    width: `calc(100px + ${theme.spacing(2)})`,
-  },
-  paper: {
-    zIndex: 1,
-    position: 'relative',
-    margin: theme.spacing(1),
-  },
-  svg: {
-    width: 100,
-    height: 100,
-  },
-  polygon: {
-    fill: theme.palette.common.white,
-    stroke: theme.palette.divider,
-    strokeWidth: 1,
-  },
-}));
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
+);
 
 export default function SimpleSlide() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -37,20 +29,16 @@ export default function SimpleSlide() {
   };
 
   return (
-    <div className={classes.root}>
-      <div className={classes.wrapper}>
+    <Box sx={{ height: 180 }}>
+      <Box sx={{ width: `calc(100px + 16px)` }}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show"
         />
         <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
+          {icon}
         </Slide>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/transitions/SimpleSlide.tsx b/docs/src/pages/components/transitions/SimpleSlide.tsx
index 7c070ea73d277a..62e061328327c4 100644
--- a/docs/src/pages/components/transitions/SimpleSlide.tsx
+++ b/docs/src/pages/components/transitions/SimpleSlide.tsx
@@ -1,37 +1,27 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Slide from '@material-ui/core/Slide';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 180,
-    },
-    wrapper: {
-      width: `calc(100px + ${theme.spacing(2)})`,
-    },
-    paper: {
-      zIndex: 1,
-      position: 'relative',
-      margin: theme.spacing(1),
-    },
-    svg: {
-      width: 100,
-      height: 100,
-    },
-    polygon: {
-      fill: theme.palette.common.white,
-      stroke: theme.palette.divider,
-      strokeWidth: 1,
-    },
-  }),
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
 );
 
 export default function SimpleSlide() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -39,20 +29,16 @@ export default function SimpleSlide() {
   };
 
   return (
-    <div className={classes.root}>
-      <div className={classes.wrapper}>
+    <Box sx={{ height: 180 }}>
+      <Box sx={{ width: `calc(100px + 16px)` }}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show"
         />
         <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
+          {icon}
         </Slide>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }

From 9b9d64e4958b8ef44559f17ec4532e8d083905d7 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 24 Mar 2021 19:03:59 -0300
Subject: [PATCH 5/5] docs: Migrate zoom demo to emotion

---
 .../components/transitions/SimpleZoom.js      | 67 +++++++------------
 .../components/transitions/SimpleZoom.tsx     | 67 ++++++-------------
 2 files changed, 45 insertions(+), 89 deletions(-)

diff --git a/docs/src/pages/components/transitions/SimpleZoom.js b/docs/src/pages/components/transitions/SimpleZoom.js
index 8d4084580f994b..de79313218390f 100644
--- a/docs/src/pages/components/transitions/SimpleZoom.js
+++ b/docs/src/pages/components/transitions/SimpleZoom.js
@@ -1,33 +1,27 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Zoom from '@material-ui/core/Zoom';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 180,
-  },
-  container: {
-    display: 'flex',
-  },
-  paper: {
-    margin: theme.spacing(1),
-  },
-  svg: {
-    width: 100,
-    height: 100,
-  },
-  polygon: {
-    fill: theme.palette.common.white,
-    stroke: theme.palette.divider,
-    strokeWidth: 1,
-  },
-}));
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
+);
 
 export default function SimpleZoom() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -35,32 +29,17 @@ export default function SimpleZoom() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 180 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Zoom in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Zoom>
-        <Zoom
-          in={checked}
-          style={{
-            transitionDelay: checked ? '500ms' : '0ms',
-          }}
-        >
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
+      <Box sx={{ display: 'flex' }}>
+        <Zoom in={checked}>{icon}</Zoom>
+        <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
+          {icon}
         </Zoom>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/transitions/SimpleZoom.tsx b/docs/src/pages/components/transitions/SimpleZoom.tsx
index 3719dcadca2d54..de79313218390f 100644
--- a/docs/src/pages/components/transitions/SimpleZoom.tsx
+++ b/docs/src/pages/components/transitions/SimpleZoom.tsx
@@ -1,35 +1,27 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Zoom from '@material-ui/core/Zoom';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: 180,
-    },
-    container: {
-      display: 'flex',
-    },
-    paper: {
-      margin: theme.spacing(1),
-    },
-    svg: {
-      width: 100,
-      height: 100,
-    },
-    polygon: {
-      fill: theme.palette.common.white,
-      stroke: theme.palette.divider,
-      strokeWidth: 1,
-    },
-  }),
+const icon = (
+  <Paper sx={{ m: 1 }} elevation={4}>
+    <Box component="svg" sx={{ width: 100, height: 100 }}>
+      <Box
+        component="polygon"
+        sx={{
+          fill: (theme) => theme.palette.common.white,
+          stroke: (theme) => theme.palette.divider,
+          strokeWidth: 1,
+        }}
+        points="0,100 50,00, 100,100"
+      />
+    </Box>
+  </Paper>
 );
 
 export default function SimpleZoom() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = () => {
@@ -37,32 +29,17 @@ export default function SimpleZoom() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ height: 180 }}>
       <FormControlLabel
         control={<Switch checked={checked} onChange={handleChange} />}
         label="Show"
       />
-      <div className={classes.container}>
-        <Zoom in={checked}>
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
-        </Zoom>
-        <Zoom
-          in={checked}
-          style={{
-            transitionDelay: checked ? '500ms' : '0ms',
-          }}
-        >
-          <Paper elevation={4} className={classes.paper}>
-            <svg className={classes.svg}>
-              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-            </svg>
-          </Paper>
+      <Box sx={{ display: 'flex' }}>
+        <Zoom in={checked}>{icon}</Zoom>
+        <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
+          {icon}
         </Zoom>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }