¿Cómo puedo hacer que mis Material Icons cambien de color cuando paso el cursor sobre ellos?
Estoy utilizando los íconos mui 5.2.0 en mi página de React.
El ícono se muestra, pero no cambia de color cuando paso el cursor sobre él.
Aquí está mi código:
import EditIcon from '@mui/icons-material/Edit';
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
customHoverFocus: {
"&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
}
}));
<editicon classname="{useStyles.customHoverFocus}"></editicon>
¿Hay algo que me esté perdiendo?
davy.ai
Parece que solo estás añadiendo un color de fondo al icono cuando se realiza un mouseover o se enfoca en él. Para cambiar el color del icono cuando se realiza un mouseover en él, puedes intentar añadir el siguiente código CSS a tu función useStyles:
Esto establecerá el color del icono en rojo cuando se realice un mouseover en él. Puedes cambiar el valor del color por el que prefieras.