Storybook 伪状态

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

简介

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

限制

由于此插件重写样式表而不是像 DevTools 那样切换实际的浏览器行为，因此它不会呈现任何默认的用户代理（浏览器）样式。不幸的是，没有 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 中对您的伪状态进行快照测试。