0
304
ViewsSelección de MUI: cambia el color de fondo del ícono cuando se desplaza el mouse
Actualmente estoy trabajando para personalizar el método MUI Select . Sin embargo, encontré que es difícil pasar el "NarrowDownIcon":
Quiero cambiar el color de backgroundColor de este ícono a "azul" cuando lo desplace, este es mi código:
icon: { color: theme.palette.primary.dark, height: 32, width: 32, top: `calc(50% - ${theme.spacing(2.2)}px)`, borderRadius: "50%", cursor: "pointer", "&:hover": { backgroundColor: theme.palette.primary.lighter, }, },luego apliqué este css para seleccionar la clase de icono:
<Select value={selectedValue} onChange={onChange} onFocus={onFocus} onBlur={onBlur} className={classes.textInput} inputProps={{ id, name: id, }} classes={{ icon: classes.icon, }}pero no funciona, alguien me puede ayudar con esto, gracias
·
Juan Pablo Isaza
1 answers
Answer question0
Para cambiar el color del ícono cuando pases el mouse por cualquier lugar dentro, selecciona:
root: { "&:hover .MuiSvgIcon-root": { color: "red" } }, <Select className={classes.root}> Para cambiar el color del ícono cuando solo pasa el mouse sobre el ícono en sí (no el campo de entrada). Tenga en cuenta que su código no funciona porque el ícono tiene pointerEvents configurado en none :
icon: { pointerEvents: "auto", "&:hover": { color: "red" } } <Select classes={{ icon: classes.icon }}> 
·
Juan Pablo Isaza
Report
Answer question