How to customize Material UI autocomplete dropdown menu

Question

I am using Material UI v5 beta1 and I have been trying to customize their Autocomplete component so that the Typography color on the options changes from black to white whenever the item is selected, however, I can't figure out how to pass the style to it. So far I have tried passing my styles on .MuiAutocomplete-option either through a styled component or a global override (see code attached) and tried every state I can think of, hover, selected, focused, even tried the Material classes for those but none of them worked. I have also tried using a custom Popper with a MenuList inside but with no luck. I have been pulling my hair with this for a couple of days now, and not being able to inspect the DOM makes it even harder, any help or tip would be highly appreciated. Thank you in advance.

MuiAutocomplete: {
    styleOverrides: {
        root: {
           // ...
        },
        option: {
            padding: '5px 12px',
            backgroundColor: theme.palette.background.paper,
            display: 'flex',
            height: 42,
            borderRadius: theme.borderRadius.s,

            '&:hover': {
                backgroundColor: theme.palette.action.hover,
                '& .Mui-Typography-root': { color: theme.palette.text.contrast },
            },

            '& .Mui-selected': {
                backgroundColor: theme.palette.action.hover,
                '& .Mui-Typography-root': { color: theme.palette.text.contrast },
            },

            '&.disabled': {
                opacity: 0.5,
                '& .Mui-Typography-root': {
                    color: theme.palette.text.disabled,
                },
            },
        },

renderOption={(props, option) => {
    return (
        <li {...props}>
            <Box display={'flex'} flexDirection={'row'}>
                <Avatar size={'32'} variant={'circular'} />
                <Box display={'flex'} ml={3} flexDirection={'column'}>
                    <Typography color={'text.primary'}>
                        {option.label}
                    </Typography>
                    <Typography color={'text.secondary'}>
                        Extra Information
                    </Typography>
                </Box>
            </Box>
        </li>
    );
}}

Answer 1

I would pass in { selected } to your renderOption, then use it to toggle your styling inline

For example:

renderOption={(props, option, { selected }) => {
    return (
        <li {...props}>
            <Box display={'flex'} flexDirection={'row'} style={{ backgroundColor: selected ? 'red' : 'green' }}>
                <Avatar size={'32'} variant={'circular'} />
                <Box display={'flex'} ml={3} flexDirection={'column'}>
                    <Typography color={'text.primary'}>
                        {option.label}
                    </Typography>
                    <Typography color={'text.secondary'}>
                        Extra Information
                    </Typography>
                </Box>
            </Box>
        </li>
    );
}}