mui · mnajdova · May 6, 2021 · May 4, 2021 · May 4, 2021 · May 5, 2021
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }