MaterialUI v5 -> 如何设置自动完成选项的样式

Question

I'm trying to apply some basic styles to the options inside the Autocomplete component from MUI v5. I'm just trying to change the background color on hover, and based on whether or not it is selected. I've tried 2 approaches based on the documentation, using a theme, and applying the sx prop to Autocomplete.

Using Theme almost has me there, code below:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        option: {
          '&[aria-selected="true"]': {
            backgroundColor: '#e3abed',
          },

          '&:hover': {
            backgroundColor: '#9c27b0',
          },
          backgroundColor: '#fff',
        },
      },
    },
  },
})

I have the ThemeProvider wrapped around my entire app

and the component:

<Autocomplete
  options={['1', '2', '3']}
  renderInput={(params) => <TextField {...params} label="Priority" />}
  onChange={(_e, val) => setPriority(val)}
/>

So, this almost works. However the [aria-selected="true"] styling is only being applied when I am also hovering over another option in the dropdown. Otherwise it's the default grey that comes with the component and I don't understand why.

The second path I have tried is to use the sx prop on the Autocomplete component. In the docs it says you can target child components by their class name: https://mui.com/material-ui/customization/how-to-customize/#overriding-styles-with-class-names

Here is my component:

<Autocomplete
  options={['1', '2', '3']}
  renderInput={(params) => <TextField {...params} label="Priority" />}
  onChange={(_e, val) => setPriority(val)}
  sx={{
    '& .MuiAutocomplete-option': {
      backgroundColor: '#000',
    },
    '& .Mui-focused': {
      backgroundColor: 'red',
    },
  }}
  open
/>

That doesn't appear to be having any effect. I've been working on this for almost 2 hours and can't seem to get to the finish line here. Any help would be greatly appreciated.

Answer 1

You can override Autocomplete options css by targeting class

'.MuiAutocomplete-popper'

You will have to apply css globally because this node is created outside the root element in DOM.

Answer 2

I had the same problem; turns out I just needed to explore the Autocomplete API docs' Props section a bit further. There are several customization possibilities if you don't want to deal with global theme customization:

1. The PaperComponent prop allows customization of "[t]he component used to render the body of the popup." Note that simply using sx on Autocomplete does not work here because (as @bnays-mhz pointed out) the PopperComponent that the PaperComponent is nested in lives outside the main DOM tree (for z-index/modal UX purposes).
2. The renderGroup prop allows overriding the rendering of option group headers.
3. The renderOption prop allows overriding the rendering of individual options.

Answer 3

This may help you!

  <Autocomplete
  limitTags={1}
  disablePortal
  id="simple-search"
  value={select.region}
  onChange={handleChange("region")}
  options={region}
  sx={{
  width: { sm: "100%", md: 340 },
  "& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
        backgroundColor: "#363636",
  },
  "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']":
       {
          backgroundColor: "#4396e6",
       },
  "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected ='true'] .Mui-focused":
       {
          backgroundColor: "#3878b4",
       },
      }}
                disableCloseOnSelect
                multiple
                renderInput={(params) => (
                  <TextField {...params} label="Region" color="info" />
                )}
              />

Answer 4

function CustomPaper({ children }) {
  return (
    <Paper 
      sx={{
        "& .MuiAutocomplete-listbox": {
          "& .MuiAutocomplete-option[aria-selected='true']": {
            bgcolor: "purple",
            "&.Mui-focused": {
              bgcolor: "purple",
            }
          }
        },
        "& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-focused": {
          bgcolor: "red",
        }
      }}
    >
      {children}
    </Paper>
  );
}

Following up on Lars' answer, here's an example using a custom Paper component. Just pass in the custom Paper component name to the PaperComponent prop on Autocomplete <Autocomplete PaperComponent={CustomPaper} {...blahBlahOtherProps} /> . This way is nice if you don't want to override the theme for all Autocomplete components.