Storybook 擴充功能 Cssresources

Storybook 擴充功能 Cssresources，可以在您的 Story Storybook 執行時切換 CSS 資源。

框架支援

安裝

yarn add -D @storybook/addon-cssresources

設定

然後在您的 storybook 設定中建立一個名為 main.js 的檔案。

將以下內容新增至其中

module.exports = {
  addons: ["@storybook/addon-cssresources"],
};

使用方式

您需要使用 withCssResources 裝飾器在編譯時新增所有 CSS 資源。它們可以全域新增或每個 Story 新增。然後您可以從 cssresources 擴充功能 UI 選擇要載入的資源。

import { withCssResources } from "@storybook/addon-cssresources";

export default {
  title: "CssResources",
  parameters: {
    cssresources: [
      {
        id: `bluetheme`,
        code: `<style>body { background-color: lightblue; }</style>`,
        picked: false,
        hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
      },
    ],
  },
  decorators: [withCssResources],
};

export const defaultView = () => <div />;

致謝

雖然此擴充功能是 Storybook monorepo 的一部分，但它收到了以下作者的提交

Aaron Reisman、Andrew Lisowski、Armand Abric、Brody McKee、Clément DUNGLER、Gaëtan Maisse、Grey Baker、Jean-Philippe Roy、Jimmy Somsanith、Jon Palmer、Lynn Chyi、Michael Shilman、Michaël De Boey、Neville Mehta、Norbert de Langen、Paul Rosania、Preston Goforth、Renovate Bot、Simen Bekkhus、Tom Coleman、Tomi Laurell、Varun Vachhar