Storybook 伪状态

在 Storybook 中切换组件的 CSS 伪状态。

简介

此插件尝试“强制”组件的伪状态。它会重写所有文档样式表，为目标为伪类的任何规则（:hover，:focus 等）添加类名选择器。然后，该工具允许你在故事容器（#root）上切换这些类名。此外，你可以在故事的 parameters 上设置 pseudo 属性，为每个伪类设置默认值。这使得使用 Chromatic 测试这些状态成为可能。

局限性

因为此插件会重写你的样式表，而不是像 DevTools 那样切换实际的浏览器行为，所以它不会渲染任何默认的用户代理（浏览器）样式。不幸的是，没有 JavaScript API 可以切换真实的伪状态，而无需使用浏览器扩展。

入门

此插件需要 Storybook 6.1 或更高版本。使用 npx sb upgrade --prerelease 安装最新版本

首先，安装插件

npm i -D @hover/storybook-addon-pseudo-states

然后，将 "@hover/storybook-addon-pseudo-states" 添加到你 .storybook/main.js 文件中的 addons 数组中。

module.exports = {
  addons: ["@hover/storybook-addon-pseudo-states"],
}

设置默认故事状态

通过在 parameters 上设置 pseudo 属性，你可以让你的故事自动使用一组特定的伪状态。

export const Hover = () => <Button>Label</Button>
Hover.parameters = { pseudo: { hover: true } }

这使得在 Chromatic 中对伪状态进行快照测试成为可能。