Necesito ayuda. Estoy haciendo un componente usando reaccionar Avatar (Material MUI - v5). Inicialmente, se mostrará el avatar del perfil de usuario y, cuando se desplace el cursor sobre él, aparecerá Edición sobre el avatar del perfil de usuario y, al mismo tiempo, el perfil aparecerá atenuado (más o menos su opacidad llega a 0,5). Lo he resuelto usando el gancho de estado de reacción. ¿Hay alguna manera de resolverlo usando css (¡¡no un archivo css externo !!!)? Este es mi código.

 import Avatar from "@mui/material/Avatar"; import IconButton from "@mui/material/IconButton"; import EditIcon from "@mui/icons-material/Edit"; import { useState } from "react"; import CloudUploadIcon from "@mui/icons-material/CloudUpload"; const UserProfileCard = ({ imgUrl, uploadIconColor }) => { const [opacity, setOpacity] = useState(1); const onMouseEnterHandle = () => { setOpacity(0.3); }; const onMouseLeaveHandle = () => { setOpacity(1); }; return ( <> <IconButton sx={{ position: "absolute", "&:hover": { opacity: opacity, transition: "opacity 0.5s", }, opacity: opacity, transition: "opacity 0.5s", }} > <Avatar src={imgUrl ? imgUrl : "/static/images/boy.jpg"} alt="User profile"> {" "} </Avatar> </IconButton> <IconButton onMouseEnter={onMouseEnterHandle} onMouseLeave={onMouseLeaveHandle} sx={{ opacity: 0, "&:hover": { opacity: 1, transition: "opacity 0.5s", }, }} > <Avatar sx={{ backgroundColor: "transparent", }} > <EditIcon sx={{ color: uploadIconColor ? uploadIconColor : "#5B5B5B", position: "relative", }} /> </Avatar> </IconButton> </> ); }; export default UserProfileCard;