Storybook 偽狀態

在 Storybook 中切換元件的 CSS 偽狀態。

簡介

此擴充功能嘗試「強制」您的元件的偽狀態。它會重寫所有文件樣式表，以便將類別名稱選取器新增至任何目標為偽類別（:hover、:focus 等）的規則。然後，該工具可讓您在 story 容器（#root）上切換這些類別名稱。此外，您可以在 story 的 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"],
}

設定預設 story 狀態

您可以讓您的 story 自動使用一組特定的偽狀態，方法是在 parameters 上設定 pseudo 屬性

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

這使得在 Chromatic 中進行偽狀態的快照測試成為可能。