[Autocomplete] Update unstyled demo to not import Material UI (mui#34060

)
daniel-rabe · Nov 29, 2022 · 510e6d0 · 510e6d0
1 parent 351f245
commit 510e6d0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js
@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
-import { styled } from '@mui/material/styles';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { styled } from '@mui/system';
 
 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),
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
+  color: theme.palette.mode === 'light' ? '#000' : '#fff',
 }));
 
 const Listbox = styled('ul')(({ theme }) => ({
@@ -20,11 +19,11 @@ const Listbox = styled('ul')(({ theme }) => ({
   zIndex: 1,
   position: 'absolute',
   listStyle: 'none',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
   overflow: 'auto',
   maxHeight: 200,
   border: '1px solid rgba(0,0,0,.25)',
-  [`& li.${autocompleteClasses.focused}`]: {
+  '& li.Mui-focused': {
     backgroundColor: '#4a8df6',
     color: 'white',
     cursor: 'pointer',

diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
-import { styled } from '@mui/material/styles';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { styled } from '@mui/system';
 
 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),
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
+  color: theme.palette.mode === 'light' ? '#000' : '#fff',
 }));
 
 const Listbox = styled('ul')(({ theme }) => ({
@@ -20,11 +19,11 @@ const Listbox = styled('ul')(({ theme }) => ({
   zIndex: 1,
   position: 'absolute',
   listStyle: 'none',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
   overflow: 'auto',
   maxHeight: 200,
   border: '1px solid rgba(0,0,0,.25)',
-  [`& li.${autocompleteClasses.focused}`]: {
+  '& li.Mui-focused': {
     backgroundColor: '#4a8df6',
     color: 'white',
     cursor: 'pointer',