From 48c53d1b658c4f5e1efaeb9bc980910e4d26c3c0 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 6 May 2021 14:40:55 +0200
Subject: [PATCH] [docs] Migrate Autocomplete demos  (#26127)

---
 .../components/autocomplete/Asynchronous.js   |   2 +-
 .../components/autocomplete/Asynchronous.tsx  |   2 +-
 .../pages/components/autocomplete/ComboBox.js |   2 +-
 .../components/autocomplete/ComboBox.tsx      |   2 +-
 .../autocomplete/ControllableStates.js        |   2 +-
 .../autocomplete/ControllableStates.tsx       |   2 +-
 .../components/autocomplete/CountrySelect.js  |  27 +-
 .../components/autocomplete/CountrySelect.tsx |  27 +-
 .../autocomplete/CustomInputAutocomplete.js   |  30 +-
 .../autocomplete/CustomInputAutocomplete.tsx  |  30 +-
 .../components/autocomplete/CustomizedHook.js |  26 +-
 .../autocomplete/CustomizedHook.tsx           |  26 +-
 .../autocomplete/DisabledOptions.js           |   2 +-
 .../autocomplete/DisabledOptions.tsx          |   2 +-
 .../pages/components/autocomplete/Filter.js   |   2 +-
 .../pages/components/autocomplete/Filter.tsx  |   2 +-
 .../pages/components/autocomplete/FreeSolo.js |  10 +-
 .../components/autocomplete/FreeSolo.tsx      |  10 +-
 .../autocomplete/FreeSoloCreateOption.js      |   2 +-
 .../autocomplete/FreeSoloCreateOption.tsx     |   2 +-
 .../FreeSoloCreateOptionDialog.js             |   2 +-
 .../FreeSoloCreateOptionDialog.tsx            |   2 +-
 .../components/autocomplete/GitHubLabel.js    | 273 ++++++++----------
 .../components/autocomplete/GitHubLabel.tsx   | 260 ++++++++---------
 .../components/autocomplete/GoogleMaps.js     |  17 +-
 .../components/autocomplete/GoogleMaps.tsx    |  17 +-
 .../pages/components/autocomplete/Grouped.js  |   2 +-
 .../pages/components/autocomplete/Grouped.tsx |   2 +-
 .../components/autocomplete/Highlights.js     |   2 +-
 .../components/autocomplete/Highlights.tsx    |   2 +-
 .../components/autocomplete/LimitTags.js      |  36 +--
 .../components/autocomplete/LimitTags.tsx     |  36 +--
 .../components/autocomplete/Playground.js     | 112 ++-----
 .../components/autocomplete/Playground.tsx    | 112 ++-----
 .../pages/components/autocomplete/Sizes.js    |  17 +-
 .../pages/components/autocomplete/Sizes.tsx   |  17 +-
 .../src/pages/components/autocomplete/Tags.js |  17 +-
 .../pages/components/autocomplete/Tags.tsx    |  17 +-
 .../autocomplete/UseAutocomplete.js           |  70 +++--
 .../autocomplete/UseAutocomplete.tsx          |  70 +++--
 .../components/autocomplete/Virtualize.js     |  15 +-
 .../components/autocomplete/Virtualize.tsx    |  14 +-
 42 files changed, 506 insertions(+), 816 deletions(-)

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js
index 6e74342ae256dd..de74b3b847b14b 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.js
+++ b/docs/src/pages/components/autocomplete/Asynchronous.js
@@ -44,7 +44,7 @@ export default function Asynchronous() {
   return (
     <Autocomplete
       id="asynchronous-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       open={open}
       onOpen={() => {
         setOpen(true);
diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
index bccca1cb9a08e3..e99c328b206bfc 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.tsx
+++ b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -49,7 +49,7 @@ export default function Asynchronous() {
   return (
     <Autocomplete
       id="asynchronous-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       open={open}
       onOpen={() => {
         setOpen(true);
diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
index e00d6f36a80341..43b9718e8f89f6 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.js
+++ b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -9,7 +9,7 @@ export default function ComboBox() {
       disablePortal
       id="combo-box-demo"
       options={top100Films}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Movie" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx
index e00d6f36a80341..43b9718e8f89f6 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.tsx
+++ b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -9,7 +9,7 @@ export default function ComboBox() {
       disablePortal
       id="combo-box-demo"
       options={top100Films}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Movie" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/ControllableStates.js b/docs/src/pages/components/autocomplete/ControllableStates.js
index 71ceef47bdef12..4cf16a1025e959 100644
--- a/docs/src/pages/components/autocomplete/ControllableStates.js
+++ b/docs/src/pages/components/autocomplete/ControllableStates.js
@@ -24,7 +24,7 @@ export default function ControllableStates() {
         }}
         id="controllable-states-demo"
         options={options}
-        style={{ width: 300 }}
+        sx={{ width: 300 }}
         renderInput={(params) => <TextField {...params} label="Controllable" />}
       />
     </div>
diff --git a/docs/src/pages/components/autocomplete/ControllableStates.tsx b/docs/src/pages/components/autocomplete/ControllableStates.tsx
index 2bca52d8d7aff6..20c6c8188344cd 100644
--- a/docs/src/pages/components/autocomplete/ControllableStates.tsx
+++ b/docs/src/pages/components/autocomplete/ControllableStates.tsx
@@ -24,7 +24,7 @@ export default function ControllableStates() {
         }}
         id="controllable-states-demo"
         options={options}
-        style={{ width: 300 }}
+        sx={{ width: 300 }}
         renderInput={(params) => <TextField {...params} label="Controllable" />}
       />
     </div>
diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js
index ad7ae576359d72..43480e25484800 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.js
+++ b/docs/src/pages/components/autocomplete/CountrySelect.js
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
 
 // ISO 3166-1 alpha-2
 // ⚠️ No support for IE11
@@ -14,34 +14,23 @@ function countryToFlag(isoCode) {
     : isoCode;
 }
 
-const useStyles = makeStyles({
-  option: {
-    fontSize: 15,
-    '& > span': {
-      marginRight: 10,
-      fontSize: 18,
-    },
-  },
-});
-
 export default function CountrySelect() {
-  const classes = useStyles();
-
   return (
     <Autocomplete
       id="country-select-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       options={countries}
-      classes={{
-        option: classes.option,
-      }}
       autoHighlight
       getOptionLabel={(option) => option.label}
       renderOption={(props, option) => (
-        <li {...props}>
+        <Box
+          component="li"
+          sx={{ fontSize: 15, '& > span': { mr: '10px', fontSize: 18 } }}
+          {...props}
+        >
           <span>{countryToFlag(option.code)}</span>
           {option.label} ({option.code}) +{option.phone}
-        </li>
+        </Box>
       )}
       renderInput={(params) => (
         <TextField
diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx
index 5229666a9d9457..b89d9cd51a6b17 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.tsx
+++ b/docs/src/pages/components/autocomplete/CountrySelect.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
 
 // ISO 3166-1 alpha-2
 // ⚠️ No support for IE11
@@ -14,34 +14,23 @@ function countryToFlag(isoCode: string) {
     : isoCode;
 }
 
-const useStyles = makeStyles({
-  option: {
-    fontSize: 15,
-    '& > span': {
-      marginRight: 10,
-      fontSize: 18,
-    },
-  },
-});
-
 export default function CountrySelect() {
-  const classes = useStyles();
-
   return (
     <Autocomplete
       id="country-select-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       options={countries}
-      classes={{
-        option: classes.option,
-      }}
       autoHighlight
       getOptionLabel={(option) => option.label}
       renderOption={(props, option) => (
-        <li {...props}>
+        <Box
+          component="li"
+          sx={{ fontSize: 15, '& > span': { mr: '10px', fontSize: 18 } }}
+          {...props}
+        >
           <span>{countryToFlag(option.code)}</span>
           {option.label} ({option.code}) +{option.phone}
-        </li>
+        </Box>
       )}
       renderInput={(params) => (
         <TextField
diff --git a/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js
index 2e6f5ec0c288ef..e349a0346ccac0 100644
--- a/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js
+++ b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js
@@ -1,37 +1,27 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-  autocomplete: {
-    display: 'inline-block',
-  },
-  input: {
-    width: 200,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.getContrastText(theme.palette.background.paper),
-  },
-}));
 
 const options = ['Option 1', 'Option 2'];
 
 export default function CustomInputAutocomplete() {
-  const classes = useStyles();
   return (
     <label>
       Value:{' '}
       <Autocomplete
-        className={classes.autocomplete}
+        sx={{
+          display: 'inline-block',
+          '& input': {
+            width: 200,
+            bgcolor: 'background.paper',
+            color: (theme) =>
+              theme.palette.getContrastText(theme.palette.background.paper),
+          },
+        }}
         id="custom-input-demo"
         options={options}
         renderInput={(params) => (
           <div ref={params.InputProps.ref}>
-            <input
-              type="text"
-              {...params.inputProps}
-              className={clsx(classes.input, params.inputProps.className)}
-            />
+            <input type="text" {...params.inputProps} />
           </div>
         )}
       />
diff --git a/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx
index 10b88487a70dcb..e349a0346ccac0 100644
--- a/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx
+++ b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx
@@ -1,37 +1,27 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  autocomplete: {
-    display: 'inline-block',
-  },
-  input: {
-    width: 200,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.getContrastText(theme.palette.background.paper),
-  },
-}));
 
 const options = ['Option 1', 'Option 2'];
 
 export default function CustomInputAutocomplete() {
-  const classes = useStyles();
   return (
     <label>
       Value:{' '}
       <Autocomplete
-        className={classes.autocomplete}
+        sx={{
+          display: 'inline-block',
+          '& input': {
+            width: 200,
+            bgcolor: 'background.paper',
+            color: (theme) =>
+              theme.palette.getContrastText(theme.palette.background.paper),
+          },
+        }}
         id="custom-input-demo"
         options={options}
         renderInput={(params) => (
           <div ref={params.InputProps.ref}>
-            <input
-              type="text"
-              {...params.inputProps}
-              className={clsx(classes.input, params.inputProps.className)}
-            />
+            <input type="text" {...params.inputProps} />
           </div>
         )}
       />
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
index ce9c11470427b0..b42233384461e4 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.js
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -6,6 +6,15 @@ import CheckIcon from '@material-ui/icons/Check';
 import CloseIcon from '@material-ui/icons/Close';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 
+const Root = styled('div')(
+  ({ theme }) => `
+  color: ${
+    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
+  };
+  font-size: 14px;
+`,
+);
+
 const Label = styled('label')`
   padding: 0 0 4px;
   line-height: 1.5;
@@ -23,18 +32,19 @@ const InputWrapper = styled('div')(
   flex-wrap: wrap;
 
   &:hover {
-    border-color: #40a9ff;
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
   }
 
   &.focused {
-    border-color: #40a9ff;
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
     box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
   }
 
   & input {
     background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
-    color: ${theme.palette.mode === 'dark' ? '#fff' : '#000'};
-    font-size: 14px;
+    color: ${
+      theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
+    };
     height: 30px;
     box-sizing: border-box;
     padding: 4px 6px;
@@ -81,8 +91,8 @@ const StyledTag = styled(Tag)(
   overflow: hidden;
 
   &:focus {
-    border-color: #40a9ff;
-    background-color: #e6f7ff;
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
+    background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
   }
 
   & span {
@@ -167,7 +177,7 @@ export default function CustomizedHook() {
   });
 
   return (
-    <div>
+    <Root>
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
@@ -188,7 +198,7 @@ export default function CustomizedHook() {
           ))}
         </Listbox>
       ) : null}
-    </div>
+    </Root>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
index 95304454c818b1..d449a40c01d128 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -7,6 +7,15 @@ import CheckIcon from '@material-ui/icons/Check';
 import CloseIcon from '@material-ui/icons/Close';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 
+const Root = styled('div')(
+  ({ theme }) => `
+  color: ${
+    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
+  };
+  font-size: 14px;
+`,
+);
+
 const Label = styled('label')`
   padding: 0 0 4px;
   line-height: 1.5;
@@ -24,18 +33,19 @@ const InputWrapper = styled('div')(
   flex-wrap: wrap;
 
   &:hover {
-    border-color: #40a9ff;
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
   }
 
   &.focused {
-    border-color: #40a9ff;
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
     box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
   }
 
   & input {
     background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
-    color: ${theme.palette.mode === 'dark' ? '#fff' : '#000'};
-    font-size: 14px;
+    color: ${
+      theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
+    };
     height: 30px;
     box-sizing: border-box;
     padding: 4px 6px;
@@ -81,8 +91,8 @@ const StyledTag = styled(Tag)<TagProps>(
   overflow: hidden;
 
   &:focus {
-    border-color: #40a9ff;
-    background-color: #e6f7ff;
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
+    background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
   }
 
   & span {
@@ -167,7 +177,7 @@ export default function CustomizedHook() {
   });
 
   return (
-    <div>
+    <Root>
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
@@ -187,7 +197,7 @@ export default function CustomizedHook() {
           ))}
         </Listbox>
       ) : null}
-    </div>
+    </Root>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js
index 88798001a70f5f..cfab4ee0084f66 100644
--- a/docs/src/pages/components/autocomplete/DisabledOptions.js
+++ b/docs/src/pages/components/autocomplete/DisabledOptions.js
@@ -11,7 +11,7 @@ export default function DisabledOptions() {
       getOptionDisabled={(option) =>
         option === timeSlots[0] || option === timeSlots[2]
       }
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Disabled options" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
index 88798001a70f5f..cfab4ee0084f66 100644
--- a/docs/src/pages/components/autocomplete/DisabledOptions.tsx
+++ b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
@@ -11,7 +11,7 @@ export default function DisabledOptions() {
       getOptionDisabled={(option) =>
         option === timeSlots[0] || option === timeSlots[2]
       }
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Disabled options" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js
index c21b6f2e5edf51..28bc66d2e517ac 100644
--- a/docs/src/pages/components/autocomplete/Filter.js
+++ b/docs/src/pages/components/autocomplete/Filter.js
@@ -15,7 +15,7 @@ export default function Filter() {
       options={top100Films}
       getOptionLabel={(option) => option.title}
       filterOptions={filterOptions}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Custom filter" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx
index 32962dcd59eb2c..3e167f5e165137 100644
--- a/docs/src/pages/components/autocomplete/Filter.tsx
+++ b/docs/src/pages/components/autocomplete/Filter.tsx
@@ -15,7 +15,7 @@ export default function Filter() {
       options={top100Films}
       getOptionLabel={(option) => option.title}
       filterOptions={filterOptions}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Custom filter" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js
index 5d2e6c214573a7..8d4f4ae64340b9 100644
--- a/docs/src/pages/components/autocomplete/FreeSolo.js
+++ b/docs/src/pages/components/autocomplete/FreeSolo.js
@@ -1,18 +1,17 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
+import Stack from '@material-ui/core/Stack';
 import Autocomplete from '@material-ui/core/Autocomplete';
 
 export default function FreeSolo() {
   return (
-    <div style={{ width: 300 }}>
+    <Stack spacing={2} sx={{ width: 300 }}>
       <Autocomplete
         id="free-solo-demo"
         freeSolo
         options={top100Films.map((option) => option.title)}
-        renderInput={(params) => (
-          <TextField {...params} label="freeSolo" margin="normal" />
-        )}
+        renderInput={(params) => <TextField {...params} label="freeSolo" />}
       />
       <Autocomplete
         freeSolo
@@ -23,7 +22,6 @@ export default function FreeSolo() {
           <TextField
             {...params}
             label="Search input"
-            margin="normal"
             InputProps={{
               ...params.InputProps,
               type: 'search',
@@ -31,7 +29,7 @@ export default function FreeSolo() {
           />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/FreeSolo.tsx b/docs/src/pages/components/autocomplete/FreeSolo.tsx
index 5d2e6c214573a7..8d4f4ae64340b9 100644
--- a/docs/src/pages/components/autocomplete/FreeSolo.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSolo.tsx
@@ -1,18 +1,17 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
+import Stack from '@material-ui/core/Stack';
 import Autocomplete from '@material-ui/core/Autocomplete';
 
 export default function FreeSolo() {
   return (
-    <div style={{ width: 300 }}>
+    <Stack spacing={2} sx={{ width: 300 }}>
       <Autocomplete
         id="free-solo-demo"
         freeSolo
         options={top100Films.map((option) => option.title)}
-        renderInput={(params) => (
-          <TextField {...params} label="freeSolo" margin="normal" />
-        )}
+        renderInput={(params) => <TextField {...params} label="freeSolo" />}
       />
       <Autocomplete
         freeSolo
@@ -23,7 +22,6 @@ export default function FreeSolo() {
           <TextField
             {...params}
             label="Search input"
-            margin="normal"
             InputProps={{
               ...params.InputProps,
               type: 'search',
@@ -31,7 +29,7 @@ export default function FreeSolo() {
           />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js
index 21d5ae73f5b3be..a201fd92687f27 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js
@@ -58,7 +58,7 @@ export default function FreeSoloCreateOption() {
         return option.title;
       }}
       renderOption={(props, option) => <li {...props}>{option.title}</li>}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       freeSolo
       renderInput={(params) => (
         <TextField {...params} label="Free solo with text demo" />
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx
index 13957466b06c6b..bbec2e1a7f6572 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx
@@ -58,7 +58,7 @@ export default function FreeSoloCreateOption() {
         return option.title;
       }}
       renderOption={(props, option) => <li {...props}>{option.title}</li>}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       freeSolo
       renderInput={(params) => (
         <TextField {...params} label="Free solo with text demo" />
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js
index d52ac70abe9fe2..fedc10610f7d6e 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js
@@ -91,7 +91,7 @@ export default function FreeSoloCreateOptionDialog() {
         clearOnBlur
         handleHomeEndKeys
         renderOption={(props, option) => <li {...props}>{option.title}</li>}
-        style={{ width: 300 }}
+        sx={{ width: 300 }}
         freeSolo
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
       />
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx
index 8baca1057ef6c0..5c9505ed7ffb80 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx
@@ -89,7 +89,7 @@ export default function FreeSoloCreateOptionDialog() {
         clearOnBlur
         handleHomeEndKeys
         renderOption={(props, option) => <li {...props}>{option.title}</li>}
-        style={{ width: 300 }}
+        sx={{ width: 300 }}
         freeSolo
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
       />
diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js
index 0367068b160f3f..a42bbaec4866af 100644
--- a/docs/src/pages/components/autocomplete/GitHubLabel.js
+++ b/docs/src/pages/components/autocomplete/GitHubLabel.js
@@ -1,110 +1,28 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme, makeStyles } from '@material-ui/core/styles';
+import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import SettingsIcon from '@material-ui/icons/Settings';
 import CloseIcon from '@material-ui/icons/Close';
 import DoneIcon from '@material-ui/icons/Done';
-import Autocomplete from '@material-ui/core/Autocomplete';
+import Autocomplete, { autocompleteClasses } from '@material-ui/core/Autocomplete';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import InputBase from '@material-ui/core/InputBase';
+import Box from '@material-ui/core/Box';
 
-function PopperComponent(props) {
-  const { disablePortal, anchorEl, open, ...other } = props;
-  return <div {...other} />;
-}
-
-PopperComponent.propTypes = {
-  anchorEl: PropTypes.any,
-  disablePortal: PropTypes.bool,
-  open: PropTypes.bool.isRequired,
-};
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 221,
-    fontSize: 13,
-  },
-  button: {
-    fontSize: 13,
-    width: '100%',
-    textAlign: 'left',
-    paddingBottom: 8,
-    color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
-    fontWeight: 600,
-    '&:hover,&:focus': {
-      color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
-    },
-    '& span': {
-      width: '100%',
-    },
-    '& svg': {
-      width: 16,
-      height: 16,
-    },
-  },
-  tag: {
-    marginTop: 3,
-    height: 20,
-    padding: '.15em 4px',
-    fontWeight: 600,
-    lineHeight: '15px',
-    borderRadius: 2,
-  },
-  popper: {
-    border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
-    boxShadow: `0 8px 24px ${
-      theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
-    }`,
-    borderRadius: 6,
-    width: 300,
-    zIndex: theme.zIndex.modal,
-    fontSize: 13,
-    color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
-    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
-  },
-  header: {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-    }`,
-    padding: '8px 10px',
-    fontWeight: 600,
-  },
-  inputBase: {
-    padding: 10,
-    width: '100%',
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-    }`,
-    '& input': {
-      borderRadius: 4,
-      backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
-      padding: 8,
-      transition: theme.transitions.create(['border-color', 'box-shadow']),
-      border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`,
-      fontSize: 14,
-      '&:focus': {
-        boxShadow: `0px 0px 0px 3px ${
-          theme.palette.mode === 'light'
-            ? 'rgba(3, 102, 214, 0.3)'
-            : 'rgb(12, 45, 107)'
-        }`,
-        borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
-      },
-    },
-  },
-  paper: {
+const StyledAutocompletePopper = styled('div')(({ theme }) => ({
+  [`& .${autocompleteClasses.paper}`]: {
     boxShadow: 'none',
     margin: 0,
     color: 'inherit',
     fontSize: 13,
   },
-  listbox: {
+  [`& .${autocompleteClasses.listbox}`]: {
     backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
     padding: 0,
-    '& .MuiAutocomplete-option': {
+    [`& .${autocompleteClasses.option}`]: {
       minHeight: 'auto',
       alignItems: 'flex-start',
       padding: 8,
@@ -119,38 +37,79 @@ const useStyles = makeStyles((theme) => ({
       },
     },
   },
-  popperDisablePortal: {
+  [`&.${autocompleteClasses.popperDisablePortal}`]: {
     position: 'relative',
   },
-  iconSelected: {
-    width: 17,
-    height: 17,
-    marginRight: 5,
-    marginLeft: -2,
+}));
+
+function PopperComponent(props) {
+  const { disablePortal, anchorEl, open, ...other } = props;
+  return <StyledAutocompletePopper {...other} />;
+}
+
+PopperComponent.propTypes = {
+  anchorEl: PropTypes.any,
+  disablePortal: PropTypes.bool,
+  open: PropTypes.bool.isRequired,
+};
+
+const StyledPopper = styled(Popper)(({ theme }) => ({
+  border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
+  boxShadow: `0 8px 24px ${
+    theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
+  }`,
+  borderRadius: 6,
+  width: 300,
+  zIndex: theme.zIndex.modal,
+  fontSize: 13,
+  color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
+}));
+
+const StyledInput = styled(InputBase)(({ theme }) => ({
+  padding: 10,
+  width: '100%',
+  borderBottom: `1px solid ${
+    theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+  }`,
+  '& input': {
+    borderRadius: 4,
+    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
+    padding: 8,
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`,
+    fontSize: 14,
+    '&:focus': {
+      boxShadow: `0px 0px 0px 3px ${
+        theme.palette.mode === 'light'
+          ? 'rgba(3, 102, 214, 0.3)'
+          : 'rgb(12, 45, 107)'
+      }`,
+      borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
+    },
   },
-  color: {
-    width: 14,
-    height: 14,
-    flexShrink: 0,
-    borderRadius: 3,
-    marginRight: 8,
-    marginTop: 2,
+}));
+
+const Button = styled(ButtonBase)(({ theme }) => ({
+  fontSize: 13,
+  width: '100%',
+  textAlign: 'left',
+  paddingBottom: 8,
+  color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+  fontWeight: 600,
+  '&:hover,&:focus': {
+    color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
   },
-  text: {
-    flexGrow: 1,
-    '& span': {
-      color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
-    },
+  '& span': {
+    width: '100%',
   },
-  close: {
-    opacity: 0.6,
-    width: 18,
-    height: 18,
+  '& svg': {
+    width: 16,
+    height: 16,
   },
 }));
 
 export default function GitHubLabel() {
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [value, setValue] = React.useState([labels[1], labels[11]]);
   const [pendingValue, setPendingValue] = React.useState([]);
@@ -174,39 +133,45 @@ export default function GitHubLabel() {
 
   return (
     <React.Fragment>
-      <div className={classes.root}>
-        <ButtonBase
-          disableRipple
-          className={classes.button}
-          aria-describedby={id}
-          onClick={handleClick}
-        >
+      <Box sx={{ width: 221, fontSize: 13 }}>
+        <Button disableRipple aria-describedby={id} onClick={handleClick}>
           <span>Labels</span>
           <SettingsIcon />
-        </ButtonBase>
+        </Button>
         {value.map((label) => (
-          <div
+          <Box
             key={label.name}
-            className={classes.tag}
+            sx={{
+              mt: '3px',
+              height: 20,
+              padding: '.15em 4px',
+              fontWeight: 600,
+              lineHeight: '15px',
+              borderRadius: '2px',
+            }}
             style={{
               backgroundColor: label.color,
               color: theme.palette.getContrastText(label.color),
             }}
           >
             {label.name}
-          </div>
+          </Box>
         ))}
-      </div>
-      <Popper
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        placement="bottom-start"
-        className={classes.popper}
-      >
+      </Box>
+      <StyledPopper id={id} open={open} anchorEl={anchorEl} placement="bottom-start">
         <ClickAwayListener onClickAway={handleClose}>
           <div>
-            <div className={classes.header}>Apply labels to this pull request</div>
+            <Box
+              sx={{
+                borderBottom: `1px solid ${
+                  theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+                }`,
+                padding: '8px 10px',
+                fontWeight: 600,
+              }}
+            >
+              Apply labels to this pull request
+            </Box>
             <Autocomplete
               open
               multiple
@@ -215,11 +180,6 @@ export default function GitHubLabel() {
                   handleClose();
                 }
               }}
-              classes={{
-                paper: classes.paper,
-                listbox: classes.listbox,
-                popperDisablePortal: classes.popperDisablePortal,
-              }}
               value={pendingValue}
               onChange={(event, newValue, reason) => {
                 if (
@@ -237,23 +197,41 @@ export default function GitHubLabel() {
               noOptionsText="No labels"
               renderOption={(props, option, { selected }) => (
                 <li {...props}>
-                  <DoneIcon
-                    className={classes.iconSelected}
+                  <Box
+                    component={DoneIcon}
+                    sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
                     style={{
                       visibility: selected ? 'visible' : 'hidden',
                     }}
                   />
-                  <span
-                    className={classes.color}
+                  <Box
+                    component="span"
+                    sx={{
+                      width: 14,
+                      height: 14,
+                      flexShrink: 0,
+                      borderRadius: '3px',
+                      mr: 1,
+                      mt: '2px',
+                    }}
                     style={{ backgroundColor: option.color }}
                   />
-                  <div className={classes.text}>
+                  <Box
+                    sx={{
+                      flexGrow: 1,
+                      '& span': {
+                        color:
+                          theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+                      },
+                    }}
+                  >
                     {option.name}
                     <br />
                     <span>{option.description}</span>
-                  </div>
-                  <CloseIcon
-                    className={classes.close}
+                  </Box>
+                  <Box
+                    component={CloseIcon}
+                    sx={{ opacity: 0.6, width: 18, height: 18 }}
                     style={{
                       visibility: selected ? 'visible' : 'hidden',
                     }}
@@ -270,18 +248,17 @@ export default function GitHubLabel() {
               })}
               getOptionLabel={(option) => option.name}
               renderInput={(params) => (
-                <InputBase
+                <StyledInput
                   ref={params.InputProps.ref}
                   inputProps={params.inputProps}
                   autoFocus
                   placeholder="Filter labels"
-                  className={classes.inputBase}
                 />
               )}
             />
           </div>
         </ClickAwayListener>
-      </Popper>
+      </StyledPopper>
     </React.Fragment>
   );
 }
diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
index 3b866d256ef860..ee0150656adfeb 100644
--- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx
+++ b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
-import { useTheme, makeStyles, Theme } from '@material-ui/core/styles';
+import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -8,9 +8,11 @@ import CloseIcon from '@material-ui/icons/Close';
 import DoneIcon from '@material-ui/icons/Done';
 import Autocomplete, {
   AutocompleteCloseReason,
+  autocompleteClasses,
 } from '@material-ui/core/Autocomplete';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import InputBase from '@material-ui/core/InputBase';
+import Box from '@material-ui/core/Box';
 
 interface PopperComponentProps {
   anchorEl?: any;
@@ -18,94 +20,17 @@ interface PopperComponentProps {
   open: boolean;
 }
 
-function PopperComponent(props: PopperComponentProps) {
-  const { disablePortal, anchorEl, open, ...other } = props;
-  return <div {...other} />;
-}
-
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: 221,
-    fontSize: 13,
-  },
-  button: {
-    fontSize: 13,
-    width: '100%',
-    textAlign: 'left',
-    paddingBottom: 8,
-    color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
-    fontWeight: 600,
-    '&:hover,&:focus': {
-      color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
-    },
-    '& span': {
-      width: '100%',
-    },
-    '& svg': {
-      width: 16,
-      height: 16,
-    },
-  },
-  tag: {
-    marginTop: 3,
-    height: 20,
-    padding: '.15em 4px',
-    fontWeight: 600,
-    lineHeight: '15px',
-    borderRadius: 2,
-  },
-  popper: {
-    border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
-    boxShadow: `0 8px 24px ${
-      theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
-    }`,
-    borderRadius: 6,
-    width: 300,
-    zIndex: theme.zIndex.modal,
-    fontSize: 13,
-    color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
-    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
-  },
-  header: {
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-    }`,
-    padding: '8px 10px',
-    fontWeight: 600,
-  },
-  inputBase: {
-    padding: 10,
-    width: '100%',
-    borderBottom: `1px solid ${
-      theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-    }`,
-    '& input': {
-      borderRadius: 4,
-      backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
-      padding: 8,
-      transition: theme.transitions.create(['border-color', 'box-shadow']),
-      border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`,
-      fontSize: 14,
-      '&:focus': {
-        boxShadow: `0px 0px 0px 3px ${
-          theme.palette.mode === 'light'
-            ? 'rgba(3, 102, 214, 0.3)'
-            : 'rgb(12, 45, 107)'
-        }`,
-        borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
-      },
-    },
-  },
-  paper: {
+const StyledAutocompletePopper = styled('div')(({ theme }) => ({
+  [`& .${autocompleteClasses.paper}`]: {
     boxShadow: 'none',
     margin: 0,
     color: 'inherit',
     fontSize: 13,
   },
-  listbox: {
+  [`& .${autocompleteClasses.listbox}`]: {
     backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
     padding: 0,
-    '& .MuiAutocomplete-option': {
+    [`& .${autocompleteClasses.option}`]: {
       minHeight: 'auto',
       alignItems: 'flex-start',
       padding: 8,
@@ -120,38 +45,73 @@ const useStyles = makeStyles((theme: Theme) => ({
       },
     },
   },
-  popperDisablePortal: {
+  [`&.${autocompleteClasses.popperDisablePortal}`]: {
     position: 'relative',
   },
-  iconSelected: {
-    width: 17,
-    height: 17,
-    marginRight: 5,
-    marginLeft: -2,
+}));
+
+function PopperComponent(props: PopperComponentProps) {
+  const { disablePortal, anchorEl, open, ...other } = props;
+  return <StyledAutocompletePopper {...other} />;
+}
+
+const StyledPopper = styled(Popper)(({ theme }) => ({
+  border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
+  boxShadow: `0 8px 24px ${
+    theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
+  }`,
+  borderRadius: 6,
+  width: 300,
+  zIndex: theme.zIndex.modal,
+  fontSize: 13,
+  color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
+}));
+
+const StyledInput = styled(InputBase)(({ theme }) => ({
+  padding: 10,
+  width: '100%',
+  borderBottom: `1px solid ${
+    theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+  }`,
+  '& input': {
+    borderRadius: 4,
+    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
+    padding: 8,
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`,
+    fontSize: 14,
+    '&:focus': {
+      boxShadow: `0px 0px 0px 3px ${
+        theme.palette.mode === 'light'
+          ? 'rgba(3, 102, 214, 0.3)'
+          : 'rgb(12, 45, 107)'
+      }`,
+      borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
+    },
   },
-  color: {
-    width: 14,
-    height: 14,
-    flexShrink: 0,
-    borderRadius: 3,
-    marginRight: 8,
-    marginTop: 2,
+}));
+
+const Button = styled(ButtonBase)(({ theme }) => ({
+  fontSize: 13,
+  width: '100%',
+  textAlign: 'left',
+  paddingBottom: 8,
+  color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+  fontWeight: 600,
+  '&:hover,&:focus': {
+    color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
   },
-  text: {
-    flexGrow: 1,
-    '& span': {
-      color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
-    },
+  '& span': {
+    width: '100%',
   },
-  close: {
-    opacity: 0.6,
-    width: 18,
-    height: 18,
+  '& svg': {
+    width: 16,
+    height: 16,
   },
 }));
 
 export default function GitHubLabel() {
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [value, setValue] = React.useState<LabelType[]>([labels[1], labels[11]]);
   const [pendingValue, setPendingValue] = React.useState<LabelType[]>([]);
@@ -175,39 +135,45 @@ export default function GitHubLabel() {
 
   return (
     <React.Fragment>
-      <div className={classes.root}>
-        <ButtonBase
-          disableRipple
-          className={classes.button}
-          aria-describedby={id}
-          onClick={handleClick}
-        >
+      <Box sx={{ width: 221, fontSize: 13 }}>
+        <Button disableRipple aria-describedby={id} onClick={handleClick}>
           <span>Labels</span>
           <SettingsIcon />
-        </ButtonBase>
+        </Button>
         {value.map((label) => (
-          <div
+          <Box
             key={label.name}
-            className={classes.tag}
+            sx={{
+              mt: '3px',
+              height: 20,
+              padding: '.15em 4px',
+              fontWeight: 600,
+              lineHeight: '15px',
+              borderRadius: '2px',
+            }}
             style={{
               backgroundColor: label.color,
               color: theme.palette.getContrastText(label.color),
             }}
           >
             {label.name}
-          </div>
+          </Box>
         ))}
-      </div>
-      <Popper
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        placement="bottom-start"
-        className={classes.popper}
-      >
+      </Box>
+      <StyledPopper id={id} open={open} anchorEl={anchorEl} placement="bottom-start">
         <ClickAwayListener onClickAway={handleClose}>
           <div>
-            <div className={classes.header}>Apply labels to this pull request</div>
+            <Box
+              sx={{
+                borderBottom: `1px solid ${
+                  theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+                }`,
+                padding: '8px 10px',
+                fontWeight: 600,
+              }}
+            >
+              Apply labels to this pull request
+            </Box>
             <Autocomplete
               open
               multiple
@@ -219,11 +185,6 @@ export default function GitHubLabel() {
                   handleClose();
                 }
               }}
-              classes={{
-                paper: classes.paper,
-                listbox: classes.listbox,
-                popperDisablePortal: classes.popperDisablePortal,
-              }}
               value={pendingValue}
               onChange={(event, newValue, reason) => {
                 if (
@@ -241,23 +202,41 @@ export default function GitHubLabel() {
               noOptionsText="No labels"
               renderOption={(props, option, { selected }) => (
                 <li {...props}>
-                  <DoneIcon
-                    className={classes.iconSelected}
+                  <Box
+                    component={DoneIcon}
+                    sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
                     style={{
                       visibility: selected ? 'visible' : 'hidden',
                     }}
                   />
-                  <span
-                    className={classes.color}
+                  <Box
+                    component="span"
+                    sx={{
+                      width: 14,
+                      height: 14,
+                      flexShrink: 0,
+                      borderRadius: '3px',
+                      mr: 1,
+                      mt: '2px',
+                    }}
                     style={{ backgroundColor: option.color }}
                   />
-                  <div className={classes.text}>
+                  <Box
+                    sx={{
+                      flexGrow: 1,
+                      '& span': {
+                        color:
+                          theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+                      },
+                    }}
+                  >
                     {option.name}
                     <br />
                     <span>{option.description}</span>
-                  </div>
-                  <CloseIcon
-                    className={classes.close}
+                  </Box>
+                  <Box
+                    component={CloseIcon}
+                    sx={{ opacity: 0.6, width: 18, height: 18 }}
                     style={{
                       visibility: selected ? 'visible' : 'hidden',
                     }}
@@ -274,18 +253,17 @@ export default function GitHubLabel() {
               })}
               getOptionLabel={(option) => option.name}
               renderInput={(params) => (
-                <InputBase
+                <StyledInput
                   ref={params.InputProps.ref}
                   inputProps={params.inputProps}
                   autoFocus
                   placeholder="Filter labels"
-                  className={classes.inputBase}
                 />
               )}
             />
           </div>
         </ClickAwayListener>
-      </Popper>
+      </StyledPopper>
     </React.Fragment>
   );
 }
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js
index 1ba521b84b86b6..6483e12a38cf0b 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.js
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import parse from 'autosuggest-highlight/parse';
 import throttle from 'lodash/throttle';
 
@@ -22,15 +22,7 @@ function loadScript(src, position, id) {
 
 const autocompleteService = { current: null };
 
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    color: theme.palette.text.secondary,
-    marginRight: theme.spacing(2),
-  },
-}));
-
 export default function GoogleMaps() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(null);
   const [inputValue, setInputValue] = React.useState('');
   const [options, setOptions] = React.useState([]);
@@ -95,7 +87,7 @@ export default function GoogleMaps() {
   return (
     <Autocomplete
       id="google-map-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       getOptionLabel={(option) =>
         typeof option === 'string' ? option : option.description
       }
@@ -126,7 +118,10 @@ export default function GoogleMaps() {
           <li {...props}>
             <Grid container alignItems="center">
               <Grid item>
-                <LocationOnIcon className={classes.icon} />
+                <Box
+                  component={LocationOnIcon}
+                  sx={{ color: 'text.secondary', mr: 2 }}
+                />
               </Grid>
               <Grid item xs>
                 {parts.map((part, index) => (
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
index 737490ee346728..fdfb46e6bc14f9 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import parse from 'autosuggest-highlight/parse';
 import throttle from 'lodash/throttle';
 
@@ -22,13 +22,6 @@ function loadScript(src: string, position: HTMLElement | null, id: string) {
 
 const autocompleteService = { current: null };
 
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    color: theme.palette.text.secondary,
-    marginRight: theme.spacing(2),
-  },
-}));
-
 interface MainTextMatchedSubstrings {
   offset: number;
   length: number;
@@ -44,7 +37,6 @@ interface PlaceType {
 }
 
 export default function GoogleMaps() {
-  const classes = useStyles();
   const [value, setValue] = React.useState<PlaceType | null>(null);
   const [inputValue, setInputValue] = React.useState('');
   const [options, setOptions] = React.useState<readonly PlaceType[]>([]);
@@ -118,7 +110,7 @@ export default function GoogleMaps() {
   return (
     <Autocomplete
       id="google-map-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       getOptionLabel={(option) =>
         typeof option === 'string' ? option : option.description
       }
@@ -149,7 +141,10 @@ export default function GoogleMaps() {
           <li {...props}>
             <Grid container alignItems="center">
               <Grid item>
-                <LocationOnIcon className={classes.icon} />
+                <Box
+                  component={LocationOnIcon}
+                  sx={{ color: 'text.secondary', mr: 2 }}
+                />
               </Grid>
               <Grid item xs>
                 {parts.map((part, index) => (
diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js
index bb140dd4daf79d..08357a28389a3e 100644
--- a/docs/src/pages/components/autocomplete/Grouped.js
+++ b/docs/src/pages/components/autocomplete/Grouped.js
@@ -18,7 +18,7 @@ export default function Grouped() {
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option) => option.firstLetter}
       getOptionLabel={(option) => option.title}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="With categories" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx
index bb140dd4daf79d..08357a28389a3e 100644
--- a/docs/src/pages/components/autocomplete/Grouped.tsx
+++ b/docs/src/pages/components/autocomplete/Grouped.tsx
@@ -18,7 +18,7 @@ export default function Grouped() {
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option) => option.firstLetter}
       getOptionLabel={(option) => option.title}
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="With categories" />}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js
index 7866d7ae2248d7..bd21706325f3f7 100644
--- a/docs/src/pages/components/autocomplete/Highlights.js
+++ b/docs/src/pages/components/autocomplete/Highlights.js
@@ -9,7 +9,7 @@ export default function Highlights() {
   return (
     <Autocomplete
       id="highlights-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       options={top100Films}
       getOptionLabel={(option) => option.title}
       renderInput={(params) => (
diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx
index 7866d7ae2248d7..bd21706325f3f7 100644
--- a/docs/src/pages/components/autocomplete/Highlights.tsx
+++ b/docs/src/pages/components/autocomplete/Highlights.tsx
@@ -9,7 +9,7 @@ export default function Highlights() {
   return (
     <Autocomplete
       id="highlights-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       options={top100Films}
       getOptionLabel={(option) => option.title}
       renderInput={(params) => (
diff --git a/docs/src/pages/components/autocomplete/LimitTags.js b/docs/src/pages/components/autocomplete/LimitTags.js
index 85fc6177201e55..54f08dcbcf8c45 100644
--- a/docs/src/pages/components/autocomplete/LimitTags.js
+++ b/docs/src/pages/components/autocomplete/LimitTags.js
@@ -1,35 +1,21 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 500,
-    '& > * + *': {
-      marginTop: theme.spacing(3),
-    },
-  },
-}));
-
 export default function LimitTags() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <Autocomplete
-        multiple
-        limitTags={2}
-        id="multiple-limit-tags"
-        options={top100Films}
-        getOptionLabel={(option) => option.title}
-        defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
-        renderInput={(params) => (
-          <TextField {...params} label="limitTags" placeholder="Favorites" />
-        )}
-      />
-    </div>
+    <Autocomplete
+      multiple
+      limitTags={2}
+      id="multiple-limit-tags"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
+      renderInput={(params) => (
+        <TextField {...params} label="limitTags" placeholder="Favorites" />
+      )}
+    />
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/LimitTags.tsx b/docs/src/pages/components/autocomplete/LimitTags.tsx
index 4347d917f70929..54f08dcbcf8c45 100644
--- a/docs/src/pages/components/autocomplete/LimitTags.tsx
+++ b/docs/src/pages/components/autocomplete/LimitTags.tsx
@@ -1,35 +1,21 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: 500,
-    '& > * + *': {
-      marginTop: theme.spacing(3),
-    },
-  },
-}));
-
 export default function LimitTags() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <Autocomplete
-        multiple
-        limitTags={2}
-        id="multiple-limit-tags"
-        options={top100Films}
-        getOptionLabel={(option) => option.title}
-        defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
-        renderInput={(params) => (
-          <TextField {...params} label="limitTags" placeholder="Favorites" />
-        )}
-      />
-    </div>
+    <Autocomplete
+      multiple
+      limitTags={2}
+      id="multiple-limit-tags"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
+      renderInput={(params) => (
+        <TextField {...params} label="limitTags" placeholder="Favorites" />
+      )}
+    />
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
index 648dd1521a81e3..bb5bd7cc6c31e6 100644
--- a/docs/src/pages/components/autocomplete/Playground.js
+++ b/docs/src/pages/components/autocomplete/Playground.js
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
+import Stack from '@material-ui/core/Stack';
 
 export default function Playground() {
   const defaultProps = {
@@ -16,18 +17,13 @@ export default function Playground() {
   const [value, setValue] = React.useState(null);
 
   return (
-    <div style={{ width: 300 }}>
+    <Stack spacing={1} sx={{ width: 300 }}>
       <Autocomplete
         {...defaultProps}
         id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disableCloseOnSelect"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disableCloseOnSelect" variant="standard" />
         )}
       />
       <Autocomplete
@@ -35,12 +31,7 @@ export default function Playground() {
         id="clear-on-escape"
         clearOnEscape
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="clearOnEscape"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="clearOnEscape" variant="standard" />
         )}
       />
       <Autocomplete
@@ -48,12 +39,7 @@ export default function Playground() {
         id="disable-clearable"
         disableClearable
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disableClearable"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disableClearable" variant="standard" />
         )}
       />
       <Autocomplete
@@ -61,19 +47,14 @@ export default function Playground() {
         id="include-input-in-list"
         includeInputInList
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="includeInputInList"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="includeInputInList" variant="standard" />
         )}
       />
       <Autocomplete
         {...flatProps}
         id="flat-demo"
         renderInput={(params) => (
-          <TextField {...params} label="flat" margin="normal" variant="standard" />
+          <TextField {...params} label="flat" variant="standard" />
         )}
       />
       <Autocomplete
@@ -84,12 +65,7 @@ export default function Playground() {
           setValue(newValue);
         }}
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="controlled"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="controlled" variant="standard" />
         )}
       />
       <Autocomplete
@@ -98,12 +74,7 @@ export default function Playground() {
         autoComplete
         includeInputInList
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="autoComplete"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="autoComplete" variant="standard" />
         )}
       />
       <Autocomplete
@@ -111,12 +82,7 @@ export default function Playground() {
         id="disable-list-wrap"
         disableListWrap
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disableListWrap"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disableListWrap" variant="standard" />
         )}
       />
       <Autocomplete
@@ -124,12 +90,7 @@ export default function Playground() {
         id="open-on-focus"
         openOnFocus
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="openOnFocus"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="openOnFocus" variant="standard" />
         )}
       />
       <Autocomplete
@@ -137,12 +98,7 @@ export default function Playground() {
         id="auto-highlight"
         autoHighlight
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="autoHighlight"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="autoHighlight" variant="standard" />
         )}
       />
       <Autocomplete
@@ -150,12 +106,7 @@ export default function Playground() {
         id="auto-select"
         autoSelect
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="autoSelect"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="autoSelect" variant="standard" />
         )}
       />
       <Autocomplete
@@ -163,12 +114,7 @@ export default function Playground() {
         id="disabled"
         disabled
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disabled"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disabled" variant="standard" />
         )}
       />
       <Autocomplete
@@ -176,12 +122,7 @@ export default function Playground() {
         id="disable-portal"
         disablePortal
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disablePortal"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disablePortal" variant="standard" />
         )}
       />
       <Autocomplete
@@ -189,12 +130,7 @@ export default function Playground() {
         id="blur-on-select"
         blurOnSelect
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="blurOnSelect"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="blurOnSelect" variant="standard" />
         )}
       />
       <Autocomplete
@@ -202,12 +138,7 @@ export default function Playground() {
         id="clear-on-blur"
         clearOnBlur
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="clearOnBlur"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="clearOnBlur" variant="standard" />
         )}
       />
       <Autocomplete
@@ -215,15 +146,10 @@ export default function Playground() {
         id="select-on-focus"
         selectOnFocus
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="selectOnFocus"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="selectOnFocus" variant="standard" />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx
index 3dbc382f44b125..44e02cf9099ad0 100644
--- a/docs/src/pages/components/autocomplete/Playground.tsx
+++ b/docs/src/pages/components/autocomplete/Playground.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
+import Stack from '@material-ui/core/Stack';
 
 export default function Playground() {
   const defaultProps = {
@@ -14,18 +15,13 @@ export default function Playground() {
   const [value, setValue] = React.useState<FilmOptionType | null>(null);
 
   return (
-    <div style={{ width: 300 }}>
+    <Stack spacing={1} sx={{ width: 300 }}>
       <Autocomplete
         {...defaultProps}
         id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disableCloseOnSelect"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disableCloseOnSelect" variant="standard" />
         )}
       />
       <Autocomplete
@@ -33,12 +29,7 @@ export default function Playground() {
         id="clear-on-escape"
         clearOnEscape
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="clearOnEscape"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="clearOnEscape" variant="standard" />
         )}
       />
       <Autocomplete
@@ -46,12 +37,7 @@ export default function Playground() {
         id="disable-clearable"
         disableClearable
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disableClearable"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disableClearable" variant="standard" />
         )}
       />
       <Autocomplete
@@ -59,19 +45,14 @@ export default function Playground() {
         id="include-input-in-list"
         includeInputInList
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="includeInputInList"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="includeInputInList" variant="standard" />
         )}
       />
       <Autocomplete
         {...flatProps}
         id="flat-demo"
         renderInput={(params) => (
-          <TextField {...params} label="flat" margin="normal" variant="standard" />
+          <TextField {...params} label="flat" variant="standard" />
         )}
       />
       <Autocomplete
@@ -82,12 +63,7 @@ export default function Playground() {
           setValue(newValue);
         }}
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="controlled"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="controlled" variant="standard" />
         )}
       />
       <Autocomplete
@@ -96,12 +72,7 @@ export default function Playground() {
         autoComplete
         includeInputInList
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="autoComplete"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="autoComplete" variant="standard" />
         )}
       />
       <Autocomplete
@@ -109,12 +80,7 @@ export default function Playground() {
         id="disable-list-wrap"
         disableListWrap
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disableListWrap"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disableListWrap" variant="standard" />
         )}
       />
       <Autocomplete
@@ -122,12 +88,7 @@ export default function Playground() {
         id="open-on-focus"
         openOnFocus
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="openOnFocus"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="openOnFocus" variant="standard" />
         )}
       />
       <Autocomplete
@@ -135,12 +96,7 @@ export default function Playground() {
         id="auto-highlight"
         autoHighlight
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="autoHighlight"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="autoHighlight" variant="standard" />
         )}
       />
       <Autocomplete
@@ -148,12 +104,7 @@ export default function Playground() {
         id="auto-select"
         autoSelect
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="autoSelect"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="autoSelect" variant="standard" />
         )}
       />
       <Autocomplete
@@ -161,12 +112,7 @@ export default function Playground() {
         id="disabled"
         disabled
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disabled"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disabled" variant="standard" />
         )}
       />
       <Autocomplete
@@ -174,12 +120,7 @@ export default function Playground() {
         id="disable-portal"
         disablePortal
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="disablePortal"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="disablePortal" variant="standard" />
         )}
       />
       <Autocomplete
@@ -187,12 +128,7 @@ export default function Playground() {
         id="blur-on-select"
         blurOnSelect
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="blurOnSelect"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="blurOnSelect" variant="standard" />
         )}
       />
       <Autocomplete
@@ -200,12 +136,7 @@ export default function Playground() {
         id="clear-on-blur"
         clearOnBlur
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="clearOnBlur"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="clearOnBlur" variant="standard" />
         )}
       />
       <Autocomplete
@@ -213,15 +144,10 @@ export default function Playground() {
         id="select-on-focus"
         selectOnFocus
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="selectOnFocus"
-            margin="normal"
-            variant="standard"
-          />
+          <TextField {...params} label="selectOnFocus" variant="standard" />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js
index 0d304dea1812ba..4ed248f6f14c0b 100644
--- a/docs/src/pages/components/autocomplete/Sizes.js
+++ b/docs/src/pages/components/autocomplete/Sizes.js
@@ -1,24 +1,13 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 500,
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function Sizes() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Stack spacing={2} sx={{ width: 500 }}>
       <Autocomplete
         id="size-small-standard"
         size="small"
@@ -122,7 +111,7 @@ export default function Sizes() {
           />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/Sizes.tsx b/docs/src/pages/components/autocomplete/Sizes.tsx
index 7de457e6eefe15..4ed248f6f14c0b 100644
--- a/docs/src/pages/components/autocomplete/Sizes.tsx
+++ b/docs/src/pages/components/autocomplete/Sizes.tsx
@@ -1,24 +1,13 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
+import Stack from '@material-ui/core/Stack';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: 500,
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function Sizes() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Stack spacing={2} sx={{ width: 500 }}>
       <Autocomplete
         id="size-small-standard"
         size="small"
@@ -122,7 +111,7 @@ export default function Sizes() {
           />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js
index 3a51593dd33864..1840789ba49738 100644
--- a/docs/src/pages/components/autocomplete/Tags.js
+++ b/docs/src/pages/components/autocomplete/Tags.js
@@ -2,23 +2,12 @@
 import * as React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 500,
-    '& > * + *': {
-      marginTop: theme.spacing(3),
-    },
-  },
-}));
+import Stack from '@material-ui/core/Stack';
 
 export default function Tags() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Stack spacing={3} sx={{ width: 500 }}>
       <Autocomplete
         multiple
         id="tags-standard"
@@ -69,7 +58,7 @@ export default function Tags() {
           />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx
index 864542973aaa2a..9733d715ab3132 100644
--- a/docs/src/pages/components/autocomplete/Tags.tsx
+++ b/docs/src/pages/components/autocomplete/Tags.tsx
@@ -2,23 +2,12 @@
 import * as React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: 500,
-    '& > * + *': {
-      marginTop: theme.spacing(3),
-    },
-  },
-}));
+import Stack from '@material-ui/core/Stack';
 
 export default function Tags() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Stack spacing={3} sx={{ width: 500 }}>
       <Autocomplete
         multiple
         id="tags-standard"
@@ -69,7 +58,7 @@ export default function Tags() {
           />
         )}
       />
-    </div>
+    </Stack>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js
index 523707d43cdc89..efc54951cbba6f 100644
--- a/docs/src/pages/components/autocomplete/UseAutocomplete.js
+++ b/docs/src/pages/components/autocomplete/UseAutocomplete.js
@@ -1,42 +1,41 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import useAutocomplete from '@material-ui/core/useAutocomplete';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
-  label: {
-    display: 'block',
-  },
-  input: {
-    width: 200,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.getContrastText(theme.palette.background.paper),
+const Label = styled('label')({
+  display: 'block',
+});
+
+const Input = styled('input')(({ theme }) => ({
+  width: 200,
+  backgroundColor: theme.palette.background.paper,
+  color: theme.palette.getContrastText(theme.palette.background.paper),
+}));
+
+const Listbox = styled('ul')(({ theme }) => ({
+  width: 200,
+  margin: 0,
+  padding: 0,
+  zIndex: 1,
+  position: 'absolute',
+  listStyle: 'none',
+  backgroundColor: theme.palette.background.paper,
+  overflow: 'auto',
+  maxHeight: 200,
+  border: '1px solid rgba(0,0,0,.25)',
+  '& li[data-focus="true"]': {
+    backgroundColor: '#4a8df6',
+    color: 'white',
+    cursor: 'pointer',
   },
-  listbox: {
-    width: 200,
-    margin: 0,
-    padding: 0,
-    zIndex: 1,
-    position: 'absolute',
-    listStyle: 'none',
-    backgroundColor: theme.palette.background.paper,
-    overflow: 'auto',
-    maxHeight: 200,
-    border: '1px solid rgba(0,0,0,.25)',
-    '& li[data-focus="true"]': {
-      backgroundColor: '#4a8df6',
-      color: 'white',
-      cursor: 'pointer',
-    },
-    '& li:active': {
-      backgroundColor: '#2977f5',
-      color: 'white',
-    },
+  '& li:active': {
+    backgroundColor: '#2977f5',
+    color: 'white',
   },
 }));
 
 export default function UseAutocomplete() {
-  const classes = useStyles();
   const {
     getRootProps,
     getInputLabelProps,
@@ -53,18 +52,15 @@ export default function UseAutocomplete() {
   return (
     <div>
       <div {...getRootProps()}>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- props getter set htmlFor */}
-        <label className={classes.label} {...getInputLabelProps()}>
-          useAutocomplete
-        </label>
-        <input className={classes.input} {...getInputProps()} />
+        <Label {...getInputLabelProps()}>useAutocomplete</Label>
+        <Input {...getInputProps()} />
       </div>
       {groupedOptions.length > 0 ? (
-        <ul className={classes.listbox} {...getListboxProps()}>
+        <Listbox {...getListboxProps()}>
           {groupedOptions.map((option, index) => (
             <li {...getOptionProps({ option, index })}>{option.title}</li>
           ))}
-        </ul>
+        </Listbox>
       ) : null}
     </div>
   );
diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
index ecfd405b8f0c82..bb82a4d4c9c631 100644
--- a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
@@ -1,42 +1,41 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import useAutocomplete from '@material-ui/core/useAutocomplete';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  label: {
-    display: 'block',
-  },
-  input: {
-    width: 200,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.getContrastText(theme.palette.background.paper),
+const Label = styled('label')({
+  display: 'block',
+});
+
+const Input = styled('input')(({ theme }) => ({
+  width: 200,
+  backgroundColor: theme.palette.background.paper,
+  color: theme.palette.getContrastText(theme.palette.background.paper),
+}));
+
+const Listbox = styled('ul')(({ theme }) => ({
+  width: 200,
+  margin: 0,
+  padding: 0,
+  zIndex: 1,
+  position: 'absolute',
+  listStyle: 'none',
+  backgroundColor: theme.palette.background.paper,
+  overflow: 'auto',
+  maxHeight: 200,
+  border: '1px solid rgba(0,0,0,.25)',
+  '& li[data-focus="true"]': {
+    backgroundColor: '#4a8df6',
+    color: 'white',
+    cursor: 'pointer',
   },
-  listbox: {
-    width: 200,
-    margin: 0,
-    padding: 0,
-    zIndex: 1,
-    position: 'absolute',
-    listStyle: 'none',
-    backgroundColor: theme.palette.background.paper,
-    overflow: 'auto',
-    maxHeight: 200,
-    border: '1px solid rgba(0,0,0,.25)',
-    '& li[data-focus="true"]': {
-      backgroundColor: '#4a8df6',
-      color: 'white',
-      cursor: 'pointer',
-    },
-    '& li:active': {
-      backgroundColor: '#2977f5',
-      color: 'white',
-    },
+  '& li:active': {
+    backgroundColor: '#2977f5',
+    color: 'white',
   },
 }));
 
 export default function UseAutocomplete() {
-  const classes = useStyles();
   const {
     getRootProps,
     getInputLabelProps,
@@ -53,18 +52,15 @@ export default function UseAutocomplete() {
   return (
     <div>
       <div {...getRootProps()}>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- props getter set htmlFor */}
-        <label className={classes.label} {...getInputLabelProps()}>
-          useAutocomplete
-        </label>
-        <input className={classes.input} {...getInputProps()} />
+        <Label {...getInputLabelProps()}>useAutocomplete</Label>
+        <Input {...getInputProps()} />
       </div>
       {groupedOptions.length > 0 ? (
-        <ul className={classes.listbox} {...getListboxProps()}>
+        <Listbox {...getListboxProps()}>
           {(groupedOptions as typeof top100Films).map((option, index) => (
             <li {...getOptionProps({ option, index })}>{option.title}</li>
           ))}
-        </ul>
+        </Listbox>
       ) : null}
     </div>
   );
diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js
index 205e44db573d29..585b40d56d96aa 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.js
+++ b/docs/src/pages/components/autocomplete/Virtualize.js
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/core/Autocomplete';
+import Autocomplete, { autocompleteClasses } from '@material-ui/core/Autocomplete';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import ListSubheader from '@material-ui/core/ListSubheader';
-import { useTheme, makeStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
 import { VariableSizeList } from 'react-window';
 import Typography from '@material-ui/core/Typography';
 
@@ -103,8 +104,8 @@ function random(length) {
   return result;
 }
 
-const useStyles = makeStyles({
-  listbox: {
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
     boxSizing: 'border-box',
     '& ul': {
       padding: 0,
@@ -125,14 +126,12 @@ const renderGroup = (params) => [
 ];
 
 export default function Virtualize() {
-  const classes = useStyles();
-
   return (
     <Autocomplete
       id="virtualize-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       disableListWrap
-      classes={classes}
+      PopperComponent={StyledPopper}
       ListboxComponent={ListboxComponent}
       renderGroup={renderGroup}
       options={OPTIONS}
diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
index d708dc87b908fc..79ed998b18da69 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.tsx
+++ b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -2,10 +2,12 @@ import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete, {
   AutocompleteRenderGroupParams,
+  autocompleteClasses,
 } from '@material-ui/core/Autocomplete';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import ListSubheader from '@material-ui/core/ListSubheader';
-import { useTheme, makeStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
 import { VariableSizeList, ListChildComponentProps } from 'react-window';
 import Typography from '@material-ui/core/Typography';
 
@@ -102,8 +104,8 @@ function random(length: number) {
   return result;
 }
 
-const useStyles = makeStyles({
-  listbox: {
+const StyledPopper = styled(Popper)({
+  [`& .${autocompleteClasses.listbox}`]: {
     boxSizing: 'border-box',
     '& ul': {
       padding: 0,
@@ -124,14 +126,12 @@ const renderGroup = (params: AutocompleteRenderGroupParams) => [
 ];
 
 export default function Virtualize() {
-  const classes = useStyles();
-
   return (
     <Autocomplete
       id="virtualize-demo"
-      style={{ width: 300 }}
+      sx={{ width: 300 }}
       disableListWrap
-      classes={classes}
+      PopperComponent={StyledPopper}
       ListboxComponent={
         ListboxComponent as React.ComponentType<React.HTMLAttributes<HTMLElement>>
       }