在故事书中模拟悬停状态?

Question

我的组件中有一个悬停样式：

const style = css`
color: blue;
&:hover {
color: red;
}
`;

你能在故事书中模拟它，以便无需手动将鼠标悬停在组件上即可显示它吗？

Answer 1

由于在故事书中您需要显示组件悬停外观，而不是正确模拟悬停相关内容，

第一个选项是添加一个与：hover相同样式的 CSS 类：

// scss
.component {
&:hover, &.__hover {
color: red;
}
}
// JSX (story)
const ComponentWithHover = () => <Component className="component __hover">Component with hover</Component>

第二个是使用这个插件。

Answer 2

对于从互联网上发现这个问题的人，Chromatic 提供了一个故事书插件来模拟组件中的状态。

https://github.com/chromaui/storybook-addon-pseudo-states