How can I add a hover state to my button storybook function?
I can add the button to my Storybook docs, like this:
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({});
However, I can't seem to figure out how to activate the hover state of my button, which looks like this:
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;
Try onMouseEnrer event in your button You can define a boolean state and by onMouseEnter and onMouseLeave change the value of your state Then use conditional operation for bgColor. For example : const [isHover,setIsHover] = useState(false)
And in button :
<IconButton
onMouseEnter={()=>setIsHover(true)}
onMouseLeave={()=>setIsHover(false)}
sx={{
width: '40px',
height: '40px',
bgColor:(theme)=>isHover? theme.palette.primary.dark:theme.palette.primary.light
}}
>