Storybook Cssresources 插件

Storybook Cssresources 插件，用于在运行时为你的故事 Storybook 切换 CSS 资源。

框架支持

安装

yarn add -D @storybook/addon-cssresources

配置

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

添加以下内容

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

用法

你需要使用 withCssResources 装饰器在编译时添加所有 CSS 资源。这些资源可以全局添加，也可以针对每个故事添加。然后你可以从 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