在 StoryBook 中为 Button 添加悬停状态答案

【问题标题】：Add hover state in StoryBook for Button在 StoryBook 中为 Button 添加悬停状态
【发布时间】：2022-01-23 20:15:24
【问题描述】：

如何向按钮故事书功能添加悬停状态？

我可以将按钮添加到我的 Storybook 文档中，如下所示：

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({});

但是，我似乎不知道如何激活按钮的悬停状态，如下所示：

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;

【问题讨论】：

这能回答你的问题吗？ Mock hover state in Storybook?
不幸的是没有:(。我不知道如何在我的代码中实现这一点。

标签： javascript css reactjs hover storybook

【解决方案1】：

在您的按钮中尝试 onMouseEnrer 事件您可以定义一个布尔状态并通过 onMouseEnter 和 onMouseLeave 改变你的状态值然后对 bgColor 使用条件操作。例如： const [isHover,setIsHover] = useState(false)

在按钮中：

<IconButton
   onMouseEnter={()=>setIsHover(true)}
   onMouseLeave={()=>setIsHover(false)}
   sx={{
        width: '40px',
        height: '40px',
        bgColor:(theme)=>isHover?        theme.palette.primary.dark:theme.palette.primary.light
  }}
 >

【讨论】：