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.
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.