MUI 5 Autocomplete changing disabled item styles to not use opacity

Question

In MUI 5 Autocomplete I need to override disabled options style to display them in a solid color, not with opacity.

I tried this:

    '& .MuiAutocomplete-option[aria-disabled="true"]': {
      color: 'red',
      opacity: 1
    }

but the component ignores completely these styles. How can I achieve this?

This is the sandbox.

Answer 1

You need to pass the sx through popper attribute of slotProps like this:

slotProps={{
    popper: {
      sx: {
        '& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-disabled="true"]':
          {
            color: 'red',
            opacity: '1',
          },
      },
    },
  }}

You can take a look at this StackBlitz for a live working example of this solution.