Quiero lograr que la ventana emergente, respectivamente, el menú de un TextField con la propiedad 'seleccionar' cambie el color de fondo. Seguí las instrucciones de los documentos de personalización de MUI . Tuve éxito al cambiar, es decir, el color del texto y la etiqueta de un TextField con el siguiente código.

 const useStyles = makeStyles({ root: { color: "azure", '& .MuiInputLabel-root': { color: "#adadad",} } })

 const TextFieldBar = (props) => { const classes = useStyles(); return ( <Stack className={classes.root} > <TextField select > <MenuItem> Option 1 </MenuItem> <MenuItem> Option 2 </MenuItem> <MenuItem> Option 3 </MenuItem> </TextField> </Stack> ) }

Pero me quedo atascado cuando trato de cambiar algo de la ventana emergente cuando hace clic en un componente Select . Debo mencionar que no es exactamente un componente Seleccionar ya que estoy usando un TextField con la propiedad 'seleccionar'. Entonces mi pregunta es, qué clase debo usar para cambiar el fondo. Inspeccioné el elemento html y probé todas las clases aplicadas como en el siguiente fragmento, pero sin éxito.

 const useStyles = makeStyles({ root: { '& .MuiPaper-root': {background: 'black'}; //doesn't work '& .MuiPaper-rounded': {background: 'black'}; //doesn't work '& .MuiPaper-elevation': {background: 'black'}; //doesn't work . . . } })

Creo que todavía no entendía el sistema detrás de la personalización de los componentes de MUI. Es solo una suposición, pero tal vez no pueda acceder al elemento html ya que el popover/menú no es un elemento secundario del componente Stack o TextField en el que aplico mis estilos personalizados.

Estoy usando

• reaccionar 17.0.2
• mui-core 5.0.0-alpha.47
• @mui/material 5.0.3
• @mui/estilos 5.0.1

Gracias por adelantado.