Storybook 附加组件 CSS 资源

Storybook 附加组件 CSS 资源，用于在运行时为您的 Story 切换 CSS 资源 Storybook.

框架支持

安装

yarn add -D @storybook/addon-cssresources

配置

然后在您的 Storybook 配置中创建一个名为 main.js 的文件。

向其中添加以下内容

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

使用

您需要使用 withCssResources 装饰器在编译时添加所有 CSS 资源。它们可以全局添加或按 Story 添加。然后，您可以从 CSS 资源附加组件 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 单仓库 的一部分，但它收到了以下作者的提交

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