Storybook 伪类状态

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

介绍

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

限制

由于此插件是重写样式表，而不是像开发者工具那样切换实际的浏览器行为，因此它不会渲染任何默认的用户代理（浏览器）样式。遗憾的是，目前没有 JavaScript API 可以在不使用浏览器扩展的情况下切换真实的伪类状态。

入门

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

首先，安装插件

npm i -D storybook-addon-pseudo-states

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

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

设置默认故事状态

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

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

这使得能够在 Chromatic 中对你的伪类状态进行快照测试。