Storybook 伪类状态

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

简介

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

局限性

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

入门

安装插件

npx storybook add storybook-addon-pseudo-states

对于 9.0 版本之前的 Storybook，请使用 v4.0.3 版本的插件

npx storybook add storybook-addon-pseudo-states@4.0.3

设置默认故事状态

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

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

这就是让你能够在 Chromatic 中对你的伪类状态进行快照测试的原因。

定位特定元素

如果你不想强制或切换所有使用伪类样式的元素，而只希望在特定元素上启用它们，你可以设置一个字符串或数组值，而不是布尔值

export const Buttons = () => (
  <>
    <Button id="one">Hover</Button>
    <Button id="two">Hover focus</Button>
    <Button id="three">Hover focus active</Button>
  </>
);
Buttons.parameters = {
  pseudo: {
    hover: ['#one', '#two', '#three'],
    focus: ['#two', '#three'],
    active: '#three',
  },
};

这接受单个 CSS 选择器（字符串），或者一个 CSS 选择器数组，用于启用该伪类样式。

覆盖默认的根元素

默认情况下，我们使用 #storybook-root（在 Storybook 7 之前是 #root）元素作为所有伪类的根元素。如果你需要在 Storybook 的根元素之外渲染元素，可以设置 parameters.pseudo.rootSelector 来覆盖它。这对于 portals、对话框、工具提示等很方便。

例如，考虑一个将自身注入到文档 body 节点的 Dialog 组件

export const DialogButton = () => (
  <Dialog>
    <Button>Hover</Button>
  </Dialog>
);

DialogButton.parameters = {
  pseudo: { hover: true, rootSelector: 'body' },
};