Estoy usando Material UI v5 beta1 y he estado tratando de personalizar su componente Autocompletar para que el color de la tipografía en las opciones cambie de negro a blanco cada vez que se selecciona el elemento, sin embargo, no puedo averiguar cómo pasar el estilo a eso. Hasta ahora, he intentado pasar mis estilos en .MuiAutocomplete-option ya sea a través de un componente con estilo o una anulación global (ver el código adjunto) y probé todos los estados que se me ocurren, pasar el mouse, seleccionar, enfocar, incluso probé las clases de Material para esos pero ninguno de ellos funcionó. También intenté usar un Popper personalizado con un MenuList dentro pero sin suerte. Me he estado tirando de los pelos con esto durante un par de días, y no poder inspeccionar el DOM lo hace aún más difícil, cualquier ayuda o consejo sería muy apreciado. Gracias de antemano.

 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> ); }}