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 中对您的伪类状态进行快照测试成为可能。