Storybook 伪状态

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

简介

此插件尝试“强制”组件的伪状态。它重写所有文档样式表，以向任何目标伪类（:hover、:focus 等）的规则添加类名选择器。然后，该工具允许您在故事容器（#root）或您想要的任何其他根元素（通过 rootSelector 参数）上切换这些类名。此外，您可以在故事的 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 中对您的伪状态进行快照测试。

定位特定元素

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

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 来覆盖它。这对于门户、对话框、工具提示等非常方便。

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

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

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