[Autocomplete] can't change option highlight color

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The Autocomplete component uses a very light default option highlight and doesn’t exposes any CSS props to easily change it as far as i can tell.

Expected Behavior 🤔

an easy css classname/selector exposed to change the highlight color of the options

currently, it’s setting .MuiAutocomplete-option[data-focus="true"] but I can’t figure out how to actually change that using makeStyles or any other documented way

[matthlavacka]

I’m able to change it by doing:

createStyles({
    listbox: {
      padding: 0,
    },
    option: {
      borderBottom: `1px solid ${theme.palette.system[5]}`,
      // Hover
      '&[data-focus="true"]': {
        backgroundColor: theme.palette.secondSurface.light,
        borderColor: 'transparent',
      },
      // Selected
      '&[aria-selected="true"]': {
        backgroundColor: theme.palette.secondSurface.main,
        borderColor: 'transparent',
      },
    },
  });

<Autocomplete
   classes={{
      option: cs.option,
      listbox: cs.listbox,
   }}
/>

[jdoklovic]

Actually, I found a solution that will work for now. I just needed to do:

const useStyles = makeStyles({
    '@global': {
        '.MuiAutocomplete-option[data-focus="true"]': {
            background: 'blue'
        }
    }

});

and then in my component function, simply call useStyles();

It’s not great, but it will get me through until a “real” solution is found.

Thanks!