From 0d8044245fda86aebab96badcf1fddf85af7c654 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 08:51:44 -0300
Subject: [PATCH 01/19] docs: Migrate ContainedButtons demo to emotion

---
 .../components/buttons/ContainedButtons.js    | 22 +++++++----------
 .../components/buttons/ContainedButtons.tsx   | 24 +++++++------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/docs/src/pages/components/buttons/ContainedButtons.js b/docs/src/pages/components/buttons/ContainedButtons.js
index 31edf1ee963ffa..aab14434f71695 100644
--- a/docs/src/pages/components/buttons/ContainedButtons.js
+++ b/docs/src/pages/components/buttons/ContainedButtons.js
@@ -1,20 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function ContainedButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <Button variant="contained">Primary</Button>
       <Button variant="contained" color="secondary">
         Secondary
@@ -25,6 +21,6 @@ export default function ContainedButtons() {
       <Button variant="contained" href="#contained-buttons">
         Link
       </Button>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/ContainedButtons.tsx b/docs/src/pages/components/buttons/ContainedButtons.tsx
index e8ba2d43726346..aab14434f71695 100644
--- a/docs/src/pages/components/buttons/ContainedButtons.tsx
+++ b/docs/src/pages/components/buttons/ContainedButtons.tsx
@@ -1,22 +1,16 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 export default function ContainedButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <Button variant="contained">Primary</Button>
       <Button variant="contained" color="secondary">
         Secondary
@@ -27,6 +21,6 @@ export default function ContainedButtons() {
       <Button variant="contained" href="#contained-buttons">
         Link
       </Button>
-    </div>
+    </Box>
   );
 }

From 2085687ae608c5652813f4ec59e29ac0343541ab Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 09:42:32 -0300
Subject: [PATCH 02/19] docs: Migrate Text buttons demo to emotion

---
 .../pages/components/buttons/TextButtons.js   | 22 +++++++----------
 .../pages/components/buttons/TextButtons.tsx  | 24 +++++++------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/docs/src/pages/components/buttons/TextButtons.js b/docs/src/pages/components/buttons/TextButtons.js
index 121cdd42a5f0aa..fc246343ff5378 100644
--- a/docs/src/pages/components/buttons/TextButtons.js
+++ b/docs/src/pages/components/buttons/TextButtons.js
@@ -1,24 +1,20 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function TextButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <Button>Primary</Button>
       <Button color="secondary">Secondary</Button>
       <Button disabled>Disabled</Button>
       <Button href="#text-buttons">Link</Button>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/TextButtons.tsx b/docs/src/pages/components/buttons/TextButtons.tsx
index dcb61141d72de7..fc246343ff5378 100644
--- a/docs/src/pages/components/buttons/TextButtons.tsx
+++ b/docs/src/pages/components/buttons/TextButtons.tsx
@@ -1,26 +1,20 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 export default function TextButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <Button>Primary</Button>
       <Button color="secondary">Secondary</Button>
       <Button disabled>Disabled</Button>
       <Button href="#text-buttons">Link</Button>
-    </div>
+    </Box>
   );
 }

From e15ffd9e0421630262a7b3618d190975bb4aadd0 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 13:22:36 -0300
Subject: [PATCH 03/19] docs: Migrate Outlined buttons demo to emotion

---
 .../components/buttons/OutlinedButtons.js     | 22 +++++++----------
 .../components/buttons/OutlinedButtons.tsx    | 24 +++++++------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/docs/src/pages/components/buttons/OutlinedButtons.js b/docs/src/pages/components/buttons/OutlinedButtons.js
index 20c80b0cc08a28..b0234a1bf1c751 100644
--- a/docs/src/pages/components/buttons/OutlinedButtons.js
+++ b/docs/src/pages/components/buttons/OutlinedButtons.js
@@ -1,20 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function OutlinedButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <Button variant="outlined">Primary</Button>
       <Button variant="outlined" color="secondary">
         Secondary
@@ -25,6 +21,6 @@ export default function OutlinedButtons() {
       <Button variant="outlined" href="#outlined-buttons">
         Link
       </Button>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/OutlinedButtons.tsx b/docs/src/pages/components/buttons/OutlinedButtons.tsx
index 5d833185901789..b0234a1bf1c751 100644
--- a/docs/src/pages/components/buttons/OutlinedButtons.tsx
+++ b/docs/src/pages/components/buttons/OutlinedButtons.tsx
@@ -1,22 +1,16 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 export default function OutlinedButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <Button variant="outlined">Primary</Button>
       <Button variant="outlined" color="secondary">
         Secondary
@@ -27,6 +21,6 @@ export default function OutlinedButtons() {
       <Button variant="outlined" href="#outlined-buttons">
         Link
       </Button>
-    </div>
+    </Box>
   );
 }

From 28b9864ea18a46e8cb4c228b4f570e20b69a96a8 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 13:39:45 -0300
Subject: [PATCH 04/19] docs: Migrate Upload button demo to emotion

---
 .../pages/components/buttons/UploadButtons.js | 43 +++++++-----------
 .../components/buttons/UploadButtons.tsx      | 45 +++++++------------
 2 files changed, 30 insertions(+), 58 deletions(-)

diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js
index bfa4f16786290f..492b42469449c8 100644
--- a/docs/src/pages/components/buttons/UploadButtons.js
+++ b/docs/src/pages/components/buttons/UploadButtons.js
@@ -1,48 +1,35 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  input: {
-    display: 'none',
-  },
-}));
+const Input = styled('input')`
+  display: none;
+`;
 
 export default function UploadButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <input
-        accept="image/*"
-        className={classes.input}
-        id="contained-button-file"
-        multiple
-        type="file"
-      />
+    <Box
+      sx={{
+        '& > label': {
+          m: 1,
+        },
+      }}
+    >
+      <Input accept="image/*" id="contained-button-file" multiple type="file" />
       <label htmlFor="contained-button-file">
         <Button variant="contained" component="span">
           Upload
         </Button>
       </label>
-      <input
-        accept="image/*"
-        className={classes.input}
-        id="icon-button-file"
-        type="file"
-      />
+      <Input accept="image/*" id="icon-button-file" type="file" />
       <label htmlFor="icon-button-file">
         <IconButton color="primary" aria-label="upload picture" component="span">
           <PhotoCamera />
         </IconButton>
       </label>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/UploadButtons.tsx b/docs/src/pages/components/buttons/UploadButtons.tsx
index eb10edbb38e662..492b42469449c8 100644
--- a/docs/src/pages/components/buttons/UploadButtons.tsx
+++ b/docs/src/pages/components/buttons/UploadButtons.tsx
@@ -1,50 +1,35 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-    input: {
-      display: 'none',
-    },
-  }),
-);
+const Input = styled('input')`
+  display: none;
+`;
 
 export default function UploadButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <input
-        accept="image/*"
-        className={classes.input}
-        id="contained-button-file"
-        multiple
-        type="file"
-      />
+    <Box
+      sx={{
+        '& > label': {
+          m: 1,
+        },
+      }}
+    >
+      <Input accept="image/*" id="contained-button-file" multiple type="file" />
       <label htmlFor="contained-button-file">
         <Button variant="contained" component="span">
           Upload
         </Button>
       </label>
-      <input
-        accept="image/*"
-        className={classes.input}
-        id="icon-button-file"
-        type="file"
-      />
+      <Input accept="image/*" id="icon-button-file" type="file" />
       <label htmlFor="icon-button-file">
         <IconButton color="primary" aria-label="upload picture" component="span">
           <PhotoCamera />
         </IconButton>
       </label>
-    </div>
+    </Box>
   );
 }

From f70de90bb4d3b3bb9ecc7f8a13c3b9fb24fdaa5d Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 13:47:10 -0300
Subject: [PATCH 05/19] docs: Migrate Sizes buttons demo to emotion

---
 .../pages/components/buttons/ButtonSizes.js   | 48 ++++++++-----------
 .../pages/components/buttons/ButtonSizes.tsx  | 48 ++++++++-----------
 2 files changed, 39 insertions(+), 57 deletions(-)

diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js
index 6b2a07184b6d05..c04a128d0440c8 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.js
+++ b/docs/src/pages/components/buttons/ButtonSizes.js
@@ -1,65 +1,57 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import MuiButton from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
-const useStyles = makeStyles((theme) => ({
-  margin: {
-    margin: theme.spacing(1),
-  },
-}));
+const Button = styled(MuiButton)(
+  ({ theme }) => `
+  margin: ${theme.spacing(1)}
+`,
+);
 
 export default function ButtonSizes() {
-  const classes = useStyles();
-
   return (
     <div>
       <div>
-        <Button size="small" className={classes.margin}>
-          Small
-        </Button>
-        <Button size="medium" className={classes.margin}>
-          Medium
-        </Button>
-        <Button size="large" className={classes.margin}>
-          Large
-        </Button>
+        <Button size="small">Small</Button>
+        <Button size="medium">Medium</Button>
+        <Button size="large">Large</Button>
       </div>
       <div>
-        <Button variant="outlined" size="small" className={classes.margin}>
+        <Button variant="outlined" size="small">
           Small
         </Button>
-        <Button variant="outlined" size="medium" className={classes.margin}>
+        <Button variant="outlined" size="medium">
           Medium
         </Button>
-        <Button variant="outlined" size="large" className={classes.margin}>
+        <Button variant="outlined" size="large">
           Large
         </Button>
       </div>
       <div>
-        <Button variant="contained" size="small" className={classes.margin}>
+        <Button variant="contained" size="small">
           Small
         </Button>
-        <Button variant="contained" size="medium" className={classes.margin}>
+        <Button variant="contained" size="medium">
           Medium
         </Button>
-        <Button variant="contained" size="large" className={classes.margin}>
+        <Button variant="contained" size="large">
           Large
         </Button>
       </div>
       <div>
-        <IconButton aria-label="delete" className={classes.margin} size="small">
+        <IconButton aria-label="delete" size="small">
           <ArrowDownwardIcon fontSize="inherit" />
         </IconButton>
-        <IconButton aria-label="delete" className={classes.margin}>
+        <IconButton aria-label="delete">
           <DeleteIcon fontSize="small" />
         </IconButton>
-        <IconButton aria-label="delete" className={classes.margin}>
+        <IconButton aria-label="delete">
           <DeleteIcon />
         </IconButton>
-        <IconButton aria-label="delete" className={classes.margin}>
+        <IconButton aria-label="delete">
           <DeleteIcon fontSize="large" />
         </IconButton>
       </div>
diff --git a/docs/src/pages/components/buttons/ButtonSizes.tsx b/docs/src/pages/components/buttons/ButtonSizes.tsx
index eea201ba5ef3b6..c04a128d0440c8 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.tsx
+++ b/docs/src/pages/components/buttons/ButtonSizes.tsx
@@ -1,67 +1,57 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import MuiButton from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    margin: {
-      margin: theme.spacing(1),
-    },
-  }),
+const Button = styled(MuiButton)(
+  ({ theme }) => `
+  margin: ${theme.spacing(1)}
+`,
 );
 
 export default function ButtonSizes() {
-  const classes = useStyles();
-
   return (
     <div>
       <div>
-        <Button size="small" className={classes.margin}>
-          Small
-        </Button>
-        <Button size="medium" className={classes.margin}>
-          Medium
-        </Button>
-        <Button size="large" className={classes.margin}>
-          Large
-        </Button>
+        <Button size="small">Small</Button>
+        <Button size="medium">Medium</Button>
+        <Button size="large">Large</Button>
       </div>
       <div>
-        <Button variant="outlined" size="small" className={classes.margin}>
+        <Button variant="outlined" size="small">
           Small
         </Button>
-        <Button variant="outlined" size="medium" className={classes.margin}>
+        <Button variant="outlined" size="medium">
           Medium
         </Button>
-        <Button variant="outlined" size="large" className={classes.margin}>
+        <Button variant="outlined" size="large">
           Large
         </Button>
       </div>
       <div>
-        <Button variant="contained" size="small" className={classes.margin}>
+        <Button variant="contained" size="small">
           Small
         </Button>
-        <Button variant="contained" size="medium" className={classes.margin}>
+        <Button variant="contained" size="medium">
           Medium
         </Button>
-        <Button variant="contained" size="large" className={classes.margin}>
+        <Button variant="contained" size="large">
           Large
         </Button>
       </div>
       <div>
-        <IconButton aria-label="delete" className={classes.margin} size="small">
+        <IconButton aria-label="delete" size="small">
           <ArrowDownwardIcon fontSize="inherit" />
         </IconButton>
-        <IconButton aria-label="delete" className={classes.margin}>
+        <IconButton aria-label="delete">
           <DeleteIcon fontSize="small" />
         </IconButton>
-        <IconButton aria-label="delete" className={classes.margin}>
+        <IconButton aria-label="delete">
           <DeleteIcon />
         </IconButton>
-        <IconButton aria-label="delete" className={classes.margin}>
+        <IconButton aria-label="delete">
           <DeleteIcon fontSize="large" />
         </IconButton>
       </div>

From bf5ed766c9708fd0e3df8947ae37a104089a41f7 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 14:05:50 -0300
Subject: [PATCH 06/19] docs: Migrate Icon label buttons demo to emotion

---
 docs/src/pages/components/buttons/IconLabelButtons.js  | 4 ++--
 docs/src/pages/components/buttons/IconLabelButtons.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/buttons/IconLabelButtons.js b/docs/src/pages/components/buttons/IconLabelButtons.js
index f966abf48a34e3..d1cd22d557ccba 100644
--- a/docs/src/pages/components/buttons/IconLabelButtons.js
+++ b/docs/src/pages/components/buttons/IconLabelButtons.js
@@ -8,8 +8,8 @@ export default function IconLabelButtons() {
   return (
     <Box
       sx={{
-        '& > *': {
-          margin: 1,
+        '& > button': {
+          m: 1,
         },
       }}
     >
diff --git a/docs/src/pages/components/buttons/IconLabelButtons.tsx b/docs/src/pages/components/buttons/IconLabelButtons.tsx
index f966abf48a34e3..d1cd22d557ccba 100644
--- a/docs/src/pages/components/buttons/IconLabelButtons.tsx
+++ b/docs/src/pages/components/buttons/IconLabelButtons.tsx
@@ -8,8 +8,8 @@ export default function IconLabelButtons() {
   return (
     <Box
       sx={{
-        '& > *': {
-          margin: 1,
+        '& > button': {
+          m: 1,
         },
       }}
     >

From 91bbdf49f335b048ec352686eb4a7e08fd9abbca Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 14:10:13 -0300
Subject: [PATCH 07/19] docs: Migrate Icon buttons demo to emotion

---
 .../pages/components/buttons/IconButtons.js   | 22 +++++++----------
 .../pages/components/buttons/IconButtons.tsx  | 24 +++++++------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/docs/src/pages/components/buttons/IconButtons.js b/docs/src/pages/components/buttons/IconButtons.js
index ab39afc08f3f91..b067fa93e7a27f 100644
--- a/docs/src/pages/components/buttons/IconButtons.js
+++ b/docs/src/pages/components/buttons/IconButtons.js
@@ -1,23 +1,19 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function IconButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <IconButton aria-label="delete">
         <DeleteIcon />
       </IconButton>
@@ -30,6 +26,6 @@ export default function IconButtons() {
       <IconButton color="primary" aria-label="add to shopping cart">
         <AddShoppingCartIcon />
       </IconButton>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/IconButtons.tsx b/docs/src/pages/components/buttons/IconButtons.tsx
index c11696c0ad9d81..b067fa93e7a27f 100644
--- a/docs/src/pages/components/buttons/IconButtons.tsx
+++ b/docs/src/pages/components/buttons/IconButtons.tsx
@@ -1,25 +1,19 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 export default function IconButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <IconButton aria-label="delete">
         <DeleteIcon />
       </IconButton>
@@ -32,6 +26,6 @@ export default function IconButtons() {
       <IconButton color="primary" aria-label="add to shopping cart">
         <AddShoppingCartIcon />
       </IconButton>
-    </div>
+    </Box>
   );
 }

From dd7c07f0504e9d7da1bb1d18bf5295b626dad500 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sat, 27 Feb 2021 14:29:36 -0300
Subject: [PATCH 08/19] docs: Migrate Loading buttons demo to emotion

---
 .../components/buttons/LoadingButtons.js      | 22 ++++++++-----------
 .../components/buttons/LoadingButtons.tsx     | 22 ++++++++-----------
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/docs/src/pages/components/buttons/LoadingButtons.js b/docs/src/pages/components/buttons/LoadingButtons.js
index 347ce5abc8fbb2..9cd7108307da20 100644
--- a/docs/src/pages/components/buttons/LoadingButtons.js
+++ b/docs/src/pages/components/buttons/LoadingButtons.js
@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import LoadingButton from '@material-ui/lab/LoadingButton';
 import SaveIcon from '@material-ui/icons/Save';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& button': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function LoadingButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <LoadingButton pending variant="outlined">
         Submit
       </LoadingButton>
@@ -30,6 +26,6 @@ export default function LoadingButtons() {
       >
         Save
       </LoadingButton>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/LoadingButtons.tsx b/docs/src/pages/components/buttons/LoadingButtons.tsx
index 347ce5abc8fbb2..9cd7108307da20 100644
--- a/docs/src/pages/components/buttons/LoadingButtons.tsx
+++ b/docs/src/pages/components/buttons/LoadingButtons.tsx
@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import LoadingButton from '@material-ui/lab/LoadingButton';
 import SaveIcon from '@material-ui/icons/Save';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& button': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function LoadingButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <LoadingButton pending variant="outlined">
         Submit
       </LoadingButton>
@@ -30,6 +26,6 @@ export default function LoadingButtons() {
       >
         Save
       </LoadingButton>
-    </div>
+    </Box>
   );
 }

From ab878c60d171c682424ed6002c0275510f7c5acf Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 10:40:30 -0300
Subject: [PATCH 09/19] docs: Migrate Loading buttons demo to emotion

---
 .../buttons/LoadingButtonsTransition.js       | 31 +++++++++----------
 .../buttons/LoadingButtonsTransition.tsx      | 31 +++++++++----------
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.js b/docs/src/pages/components/buttons/LoadingButtonsTransition.js
index bf18e4b6af73ab..18bba69e4bb252 100644
--- a/docs/src/pages/components/buttons/LoadingButtonsTransition.js
+++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.js
@@ -1,32 +1,30 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import LoadingButton from '@material-ui/lab/LoadingButton';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Box from '@material-ui/core/Box';
+import MuiFormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import SaveIcon from '@material-ui/icons/Save';
 import SendIcon from '@material-ui/icons/Send';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& button': {
-      margin: theme.spacing(1),
-    },
-  },
-  switch: {
-    display: 'block',
-  },
-}));
+const FormControlLabel = styled(MuiFormControlLabel)(`
+  display: block;
+`);
 
 export default function LoadingButtonsTransition() {
-  const classes = useStyles();
-
   const [pending, setPending] = React.useState(false);
   function handleClick() {
     setPending(true);
   }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <FormControlLabel
         control={
           <Switch
@@ -36,7 +34,6 @@ export default function LoadingButtonsTransition() {
             color="primary"
           />
         }
-        className={classes.switch}
         label="Pending"
       />
       <LoadingButton onClick={handleClick} pending={pending} variant="outlined">
@@ -69,6 +66,6 @@ export default function LoadingButtonsTransition() {
       >
         Save
       </LoadingButton>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
index bf18e4b6af73ab..18bba69e4bb252 100644
--- a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
+++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
@@ -1,32 +1,30 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import LoadingButton from '@material-ui/lab/LoadingButton';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Box from '@material-ui/core/Box';
+import MuiFormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import SaveIcon from '@material-ui/icons/Save';
 import SendIcon from '@material-ui/icons/Send';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& button': {
-      margin: theme.spacing(1),
-    },
-  },
-  switch: {
-    display: 'block',
-  },
-}));
+const FormControlLabel = styled(MuiFormControlLabel)(`
+  display: block;
+`);
 
 export default function LoadingButtonsTransition() {
-  const classes = useStyles();
-
   const [pending, setPending] = React.useState(false);
   function handleClick() {
     setPending(true);
   }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > button': {
+          m: 1,
+        },
+      }}
+    >
       <FormControlLabel
         control={
           <Switch
@@ -36,7 +34,6 @@ export default function LoadingButtonsTransition() {
             color="primary"
           />
         }
-        className={classes.switch}
         label="Pending"
       />
       <LoadingButton onClick={handleClick} pending={pending} variant="outlined">
@@ -69,6 +66,6 @@ export default function LoadingButtonsTransition() {
       >
         Save
       </LoadingButton>
-    </div>
+    </Box>
   );
 }

From 04091e6dff209a0f1b045a83e5657cd6900e05fc Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 11:19:19 -0300
Subject: [PATCH 10/19] docs: Fix specificity demo Outlined buttons

---
 docs/src/pages/components/buttons/OutlinedButtons.js  | 2 +-
 docs/src/pages/components/buttons/OutlinedButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/buttons/OutlinedButtons.js b/docs/src/pages/components/buttons/OutlinedButtons.js
index b0234a1bf1c751..800fdf4f323705 100644
--- a/docs/src/pages/components/buttons/OutlinedButtons.js
+++ b/docs/src/pages/components/buttons/OutlinedButtons.js
@@ -6,7 +6,7 @@ export default function OutlinedButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/OutlinedButtons.tsx b/docs/src/pages/components/buttons/OutlinedButtons.tsx
index b0234a1bf1c751..800fdf4f323705 100644
--- a/docs/src/pages/components/buttons/OutlinedButtons.tsx
+++ b/docs/src/pages/components/buttons/OutlinedButtons.tsx
@@ -6,7 +6,7 @@ export default function OutlinedButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}

From 8fafbbc973362f2adba8e3b8824dbe71e2818e52 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 11:20:54 -0300
Subject: [PATCH 11/19] docs: Fix specificity demo Text buttons

---
 docs/src/pages/components/buttons/TextButtons.js  | 2 +-
 docs/src/pages/components/buttons/TextButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/buttons/TextButtons.js b/docs/src/pages/components/buttons/TextButtons.js
index fc246343ff5378..ce01affbf4e748 100644
--- a/docs/src/pages/components/buttons/TextButtons.js
+++ b/docs/src/pages/components/buttons/TextButtons.js
@@ -6,7 +6,7 @@ export default function TextButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/TextButtons.tsx b/docs/src/pages/components/buttons/TextButtons.tsx
index fc246343ff5378..ce01affbf4e748 100644
--- a/docs/src/pages/components/buttons/TextButtons.tsx
+++ b/docs/src/pages/components/buttons/TextButtons.tsx
@@ -6,7 +6,7 @@ export default function TextButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}

From 4476440e2a76132f4bf05d18c783f038be15a280 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 11:21:37 -0300
Subject: [PATCH 12/19] docs: Fix specificity demo Contained buttons

---
 docs/src/pages/components/buttons/ContainedButtons.js  | 2 +-
 docs/src/pages/components/buttons/ContainedButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/buttons/ContainedButtons.js b/docs/src/pages/components/buttons/ContainedButtons.js
index aab14434f71695..494e9ff5187d89 100644
--- a/docs/src/pages/components/buttons/ContainedButtons.js
+++ b/docs/src/pages/components/buttons/ContainedButtons.js
@@ -6,7 +6,7 @@ export default function ContainedButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/ContainedButtons.tsx b/docs/src/pages/components/buttons/ContainedButtons.tsx
index aab14434f71695..494e9ff5187d89 100644
--- a/docs/src/pages/components/buttons/ContainedButtons.tsx
+++ b/docs/src/pages/components/buttons/ContainedButtons.tsx
@@ -6,7 +6,7 @@ export default function ContainedButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}

From d8865d3c6db4845d073023c8cb870d05e3bfe86f Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 11:26:53 -0300
Subject: [PATCH 13/19] docs: Fix specificity demo Sizes buttons

---
 .../pages/components/buttons/ButtonSizes.js   | 11 ++++++++--
 .../pages/components/buttons/ButtonSizes.tsx  | 20 +++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js
index c04a128d0440c8..911a9019e18633 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.js
+++ b/docs/src/pages/components/buttons/ButtonSizes.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import MuiButton from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
@@ -13,7 +14,13 @@ const Button = styled(MuiButton)(
 
 export default function ButtonSizes() {
   return (
-    <div>
+    <Box
+      sx={{
+        '& button': {
+          m: 1,
+        },
+      }}
+    >
       <div>
         <Button size="small">Small</Button>
         <Button size="medium">Medium</Button>
@@ -55,6 +62,6 @@ export default function ButtonSizes() {
           <DeleteIcon fontSize="large" />
         </IconButton>
       </div>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/ButtonSizes.tsx b/docs/src/pages/components/buttons/ButtonSizes.tsx
index c04a128d0440c8..105503cf7a331e 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.tsx
+++ b/docs/src/pages/components/buttons/ButtonSizes.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-import MuiButton from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
-const Button = styled(MuiButton)(
-  ({ theme }) => `
-  margin: ${theme.spacing(1)}
-`,
-);
-
 export default function ButtonSizes() {
   return (
-    <div>
+    <Box
+      sx={{
+        '& button': {
+          m: 1,
+        },
+      }}
+    >
       <div>
         <Button size="small">Small</Button>
         <Button size="medium">Medium</Button>
@@ -55,6 +55,6 @@ export default function ButtonSizes() {
           <DeleteIcon fontSize="large" />
         </IconButton>
       </div>
-    </div>
+    </Box>
   );
 }

From 39b795c9d968ae6cd529d9e56301299f0093479f Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 11:34:15 -0300
Subject: [PATCH 14/19] docs: Fix specificity demo Sizes buttons

---
 docs/src/pages/components/buttons/ButtonSizes.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js
index 911a9019e18633..105503cf7a331e 100644
--- a/docs/src/pages/components/buttons/ButtonSizes.js
+++ b/docs/src/pages/components/buttons/ButtonSizes.js
@@ -1,17 +1,10 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
-import MuiButton from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
-const Button = styled(MuiButton)(
-  ({ theme }) => `
-  margin: ${theme.spacing(1)}
-`,
-);
-
 export default function ButtonSizes() {
   return (
     <Box

From 87365d076eb1295acd086c82333d3022dc9ab130 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 12:14:26 -0300
Subject: [PATCH 15/19] docs: Fix specificity demo Loading buttons

---
 docs/src/pages/components/buttons/LoadingButtons.js  | 2 +-
 docs/src/pages/components/buttons/LoadingButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/buttons/LoadingButtons.js b/docs/src/pages/components/buttons/LoadingButtons.js
index 9cd7108307da20..44af5a25a6c396 100644
--- a/docs/src/pages/components/buttons/LoadingButtons.js
+++ b/docs/src/pages/components/buttons/LoadingButtons.js
@@ -7,7 +7,7 @@ export default function LoadingButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/LoadingButtons.tsx b/docs/src/pages/components/buttons/LoadingButtons.tsx
index 9cd7108307da20..44af5a25a6c396 100644
--- a/docs/src/pages/components/buttons/LoadingButtons.tsx
+++ b/docs/src/pages/components/buttons/LoadingButtons.tsx
@@ -7,7 +7,7 @@ export default function LoadingButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}

From a73a7998f1fce756068a1b7ce88f3366c766dc1c Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 12:16:48 -0300
Subject: [PATCH 16/19] docs: Use sx prop

---
 .../components/buttons/LoadingButtonsTransition.js     | 10 ++++------
 .../components/buttons/LoadingButtonsTransition.tsx    | 10 ++++------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.js b/docs/src/pages/components/buttons/LoadingButtonsTransition.js
index 18bba69e4bb252..f39906f7279a6d 100644
--- a/docs/src/pages/components/buttons/LoadingButtonsTransition.js
+++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.js
@@ -1,16 +1,11 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
 import LoadingButton from '@material-ui/lab/LoadingButton';
 import Box from '@material-ui/core/Box';
-import MuiFormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import SaveIcon from '@material-ui/icons/Save';
 import SendIcon from '@material-ui/icons/Send';
 
-const FormControlLabel = styled(MuiFormControlLabel)(`
-  display: block;
-`);
-
 export default function LoadingButtonsTransition() {
   const [pending, setPending] = React.useState(false);
   function handleClick() {
@@ -26,6 +21,9 @@ export default function LoadingButtonsTransition() {
       }}
     >
       <FormControlLabel
+        sx={{
+          display: 'block',
+        }}
         control={
           <Switch
             checked={pending}
diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
index 18bba69e4bb252..f39906f7279a6d 100644
--- a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
+++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
@@ -1,16 +1,11 @@
 import * as React from 'react';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
 import LoadingButton from '@material-ui/lab/LoadingButton';
 import Box from '@material-ui/core/Box';
-import MuiFormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import SaveIcon from '@material-ui/icons/Save';
 import SendIcon from '@material-ui/icons/Send';
 
-const FormControlLabel = styled(MuiFormControlLabel)(`
-  display: block;
-`);
-
 export default function LoadingButtonsTransition() {
   const [pending, setPending] = React.useState(false);
   function handleClick() {
@@ -26,6 +21,9 @@ export default function LoadingButtonsTransition() {
       }}
     >
       <FormControlLabel
+        sx={{
+          display: 'block',
+        }}
         control={
           <Switch
             checked={pending}

From e33f111071b64686a5a8e44074b2b2836612649f Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 12:19:46 -0300
Subject: [PATCH 17/19] docs: Fix Input emotion component for Upload buttons
 demo

---
 docs/src/pages/components/buttons/UploadButtons.js  | 6 +++---
 docs/src/pages/components/buttons/UploadButtons.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js
index 492b42469449c8..d8a3f52ea62909 100644
--- a/docs/src/pages/components/buttons/UploadButtons.js
+++ b/docs/src/pages/components/buttons/UploadButtons.js
@@ -5,9 +5,9 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
-const Input = styled('input')`
-  display: none;
-`;
+const Input = styled('input')({
+  display: 'none'
+});
 
 export default function UploadButtons() {
   return (
diff --git a/docs/src/pages/components/buttons/UploadButtons.tsx b/docs/src/pages/components/buttons/UploadButtons.tsx
index 492b42469449c8..d8a3f52ea62909 100644
--- a/docs/src/pages/components/buttons/UploadButtons.tsx
+++ b/docs/src/pages/components/buttons/UploadButtons.tsx
@@ -5,9 +5,9 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
-const Input = styled('input')`
-  display: none;
-`;
+const Input = styled('input')({
+  display: 'none'
+});
 
 export default function UploadButtons() {
   return (

From b365b7b5af0405aa0df38512901dc4b12fa48bc8 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 28 Feb 2021 19:17:16 +0100
Subject: [PATCH 18/19] yarn prettier

---
 docs/src/pages/components/buttons/UploadButtons.js  | 2 +-
 docs/src/pages/components/buttons/UploadButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js
index d8a3f52ea62909..de28f5c2fb5bc1 100644
--- a/docs/src/pages/components/buttons/UploadButtons.js
+++ b/docs/src/pages/components/buttons/UploadButtons.js
@@ -6,7 +6,7 @@ import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
 const Input = styled('input')({
-  display: 'none'
+  display: 'none',
 });
 
 export default function UploadButtons() {
diff --git a/docs/src/pages/components/buttons/UploadButtons.tsx b/docs/src/pages/components/buttons/UploadButtons.tsx
index d8a3f52ea62909..de28f5c2fb5bc1 100644
--- a/docs/src/pages/components/buttons/UploadButtons.tsx
+++ b/docs/src/pages/components/buttons/UploadButtons.tsx
@@ -6,7 +6,7 @@ import IconButton from '@material-ui/core/IconButton';
 import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
 const Input = styled('input')({
-  display: 'none'
+  display: 'none',
 });
 
 export default function UploadButtons() {

From 0d1e8e03eef1c165fe196617d8d92f8cb873f0c3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 28 Feb 2021 19:24:25 +0100
Subject: [PATCH 19/19] make wrapper agnostic when possible

---
 docs/src/pages/components/buttons/IconButtons.js      | 11 ++---------
 docs/src/pages/components/buttons/IconButtons.tsx     | 11 ++---------
 docs/src/pages/components/buttons/IconLabelButtons.js |  2 +-
 .../src/pages/components/buttons/IconLabelButtons.tsx |  2 +-
 docs/src/pages/components/buttons/UploadButtons.js    |  2 +-
 docs/src/pages/components/buttons/UploadButtons.tsx   |  2 +-
 6 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/docs/src/pages/components/buttons/IconButtons.js b/docs/src/pages/components/buttons/IconButtons.js
index b067fa93e7a27f..f7bcf7f57fbb22 100644
--- a/docs/src/pages/components/buttons/IconButtons.js
+++ b/docs/src/pages/components/buttons/IconButtons.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AlarmIcon from '@material-ui/icons/Alarm';
@@ -7,13 +6,7 @@ import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
 
 export default function IconButtons() {
   return (
-    <Box
-      sx={{
-        '& > button': {
-          m: 1,
-        },
-      }}
-    >
+    <div>
       <IconButton aria-label="delete">
         <DeleteIcon />
       </IconButton>
@@ -26,6 +19,6 @@ export default function IconButtons() {
       <IconButton color="primary" aria-label="add to shopping cart">
         <AddShoppingCartIcon />
       </IconButton>
-    </Box>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/buttons/IconButtons.tsx b/docs/src/pages/components/buttons/IconButtons.tsx
index b067fa93e7a27f..f7bcf7f57fbb22 100644
--- a/docs/src/pages/components/buttons/IconButtons.tsx
+++ b/docs/src/pages/components/buttons/IconButtons.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AlarmIcon from '@material-ui/icons/Alarm';
@@ -7,13 +6,7 @@ import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
 
 export default function IconButtons() {
   return (
-    <Box
-      sx={{
-        '& > button': {
-          m: 1,
-        },
-      }}
-    >
+    <div>
       <IconButton aria-label="delete">
         <DeleteIcon />
       </IconButton>
@@ -26,6 +19,6 @@ export default function IconButtons() {
       <IconButton color="primary" aria-label="add to shopping cart">
         <AddShoppingCartIcon />
       </IconButton>
-    </Box>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/buttons/IconLabelButtons.js b/docs/src/pages/components/buttons/IconLabelButtons.js
index d1cd22d557ccba..870c687ab6d52d 100644
--- a/docs/src/pages/components/buttons/IconLabelButtons.js
+++ b/docs/src/pages/components/buttons/IconLabelButtons.js
@@ -8,7 +8,7 @@ export default function IconLabelButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/IconLabelButtons.tsx b/docs/src/pages/components/buttons/IconLabelButtons.tsx
index d1cd22d557ccba..870c687ab6d52d 100644
--- a/docs/src/pages/components/buttons/IconLabelButtons.tsx
+++ b/docs/src/pages/components/buttons/IconLabelButtons.tsx
@@ -8,7 +8,7 @@ export default function IconLabelButtons() {
   return (
     <Box
       sx={{
-        '& > button': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js
index de28f5c2fb5bc1..bde267a48bfd4a 100644
--- a/docs/src/pages/components/buttons/UploadButtons.js
+++ b/docs/src/pages/components/buttons/UploadButtons.js
@@ -13,7 +13,7 @@ export default function UploadButtons() {
   return (
     <Box
       sx={{
-        '& > label': {
+        '& > :not(style)': {
           m: 1,
         },
       }}
diff --git a/docs/src/pages/components/buttons/UploadButtons.tsx b/docs/src/pages/components/buttons/UploadButtons.tsx
index de28f5c2fb5bc1..bde267a48bfd4a 100644
--- a/docs/src/pages/components/buttons/UploadButtons.tsx
+++ b/docs/src/pages/components/buttons/UploadButtons.tsx
@@ -13,7 +13,7 @@ export default function UploadButtons() {
   return (
     <Box
       sx={{
-        '& > label': {
+        '& > :not(style)': {
           m: 1,
         },
       }}