在 StoryBook 中为 Button 添加悬停状态

Posted 2023-02-19

【中文标题】在 StoryBook 中为 Button 添加悬停状态

【英文标题】：Add hover state in StoryBook for 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?

不幸的是没有:(。我不知道如何在我的代码中实现这一点。

【参考方案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
  
 >