Is there a way to implement a hover effect on my button Storybook function?
To include the button in my Storybook documentation, I follow these steps:
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({});
I am struggling with activating the hover state of my button, which is defined 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;