Agregar estado de desplazamiento en StoryBook para el botón
¿Cómo puedo agregar un estado de hover a mi función de botón en Storybook?
Puedo agregar el botón a mis documentos de Storybook de la siguiente manera:
import ButtonClose from './ButtonClose';
const StoryMeta = {
title: `Components/Button/ButtonClose`,
component: ButtonClose,
};
export default StoryMeta;
const Template = (args) => <buttonclose {...args}=""></buttonclose>;
export const Default = Template.bind({});
Sin embargo, no puedo encontrar la manera de activar el estado de hover 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"></svgicons>
</iconbutton>
);
export default ButtonClose;
davy.ai
Para activar el estado de “hover” del botón en Storybook, simplemente puedes pasar una prop al componente ButtonClose en tu historia. En este caso, dado que el estado de “hover” está definido utilizando el pseudo-selector “&:hover” en la prop “sx” del componente ButtonClose, podemos pasar la prop “sx” con el estilo apropiado para el estado de “hover” al objeto “args” del Template, de la siguiente manera:
Aquí, estamos estableciendo la prop “sx” en el objeto “args” de la historia “Default” como un objeto con el selector “&:hover” y el estilo deseado para el estado de “hover”, que es cambiar el color de fondo al color primario oscuro. Ahora, en Storybook, cuando pases el cursor sobre el botón en la historia “Default”, el color de fondo debería cambiar al color primario oscuro.