[docs] Migrate Autocomplete demos (#26127)

Author: mnajdova

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);

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);

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" />}
     />
   );

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" />}
     />
   );

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>

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>

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

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

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>
         )}
       />

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>
         )}
       />