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 中進行偽狀態的快照測試。