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 來覆寫它。這對於 portals、對話框、工具提示等非常方便。

例如，考慮一個將自身注入到文件的 body 節點的 Dialog 元件

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

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