¿Cómo puedo agregar un estado de desplazamiento a la función de libro de cuentos de mi botón?
Puedo agregar el botón a mis documentos de Storybook, así:
import ButtonClose from './ButtonClose'; const StoryMeta = { title: `Components/Button/ButtonClose`, component: ButtonClose, }; export default StoryMeta; const Template = (args) => <ButtonClose {...args} />; export const Default = Template.bind({});Sin embargo, parece que no puedo averiguar cómo activar el estado de desplazamiento de mi botón, que se ve así:
import React from 'react'; import { IconButton } from '@mui/material'; import SvgIcons from '../SvgIcons'; const ButtonClose = ({ onClick, className }) => ( <IconButton sx={{ width: '40px', height: '40px', '&:hover': { bgcolor: palette.primary.dark, }} onClick={onClick} className={className} > <SvgIcons icon="close-button" /> </IconButton> ); export default ButtonClose;Pruebe el evento onMouseEnrer en su botón. Puede definir un estado booleano y mediante onMouseEnter y onMouseLeave cambie el valor de su estado. Luego use la operación condicional para bgColor. Por ejemplo: const [isHover,setIsHover] = useState(false)
Y en el botón:
<IconButton onMouseEnter={()=>setIsHover(true)} onMouseLeave={()=>setIsHover(false)} sx={{ width: '40px', height: '40px', bgColor:(theme)=>isHover? theme.palette.primary.dark:theme.palette.primary.light }} >