Storybook 中的模拟悬停状态？

Question

我的组件中有悬停样式：

const style = css`
  color: blue;

  &:hover {
    color: red;
  }
`;

您能否在 Storybook 中模拟它，以便无需手动将鼠标悬停在组件上即可显示它？

Answer 1

由于在 Storybook 中您需要显示组件悬停外观，而不是正确模拟悬停相关的东西，

第一个 选项是添加一个 css class 与 :hover 相同的样式：

// scss
.component {
  &:hover, &.__hover {
    color: red;
  }
}

// JSX (story)
const ComponentWithHover = () => <Component className="component __hover">Component with hover</Component>

第二个一个是用this addon.

Storybook 中的模拟悬停状态？

Mock hover state in Storybook?

storybook