通过全局参数切换故事书背景

Question

我有以下全局类型来启用故事书中的工具栏，让我选择主题：

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme',
    defaultValue: MyTheme.Light,
    toolbar: {
      icon: 'mirror',
      items: [MyTheme.Light, MyTheme.Dark],
      showName: true,
      dynamicTitle: true,
    },
  },
};

这工作正常，我可以通过工具栏切换主题：

现在我想根据主题设置故事的背景颜色（正文的背景颜色），但我不知道如何为全球所有故事执行此操作。

我知道如何配置不同的背景颜色，但我不知道如何根据context.globals. 这是如何运作的？

Answer 1

您可以使用装饰器来设置全局视图和se

像这儿

import { useEffect } from "react";
import "./preview.css";

enum MyTheme {
  Light = "light",
  Dark = "dark",
  Tomato = "tomato"
}

export const globalTypes = {
  theme: {
    name: "Theme",
    description: "Global theme",
    defaultValue: MyTheme.Light,
    toolbar: {
      icon: "mirror",
      items: [
        {
          title: "light",
          value: MyTheme.Light
        },
        { title: "dark", value: MyTheme.Dark },
        { title: "tomato", value: MyTheme.Tomato }
      ],
      showName: true,
      dynamicTitle: true
    }
  }
};

const clearStyles = (element: HTMLElement) => {
  for (const className of Object.values(MyTheme)) {
    element.classList.remove(className);
  }
};

const applyStyle = (element: HTMLElement, className: string) => {
  element.classList.add(className);
};

const WithThemeProvider = (Story, context) => {
  useEffect(() => {
    const body = window.document.body;
    clearStyles(body);
    applyStyle(body, context.globals.theme);
    return () => {
      clearStyles(body);
    };
  }, [context.globals.theme]);

  return <Story />;
};
export const decorators = [WithThemeProvider];

我知道直接与身体合作可能会感觉“肮脏”。但这是建议的方式，例如addonsdecorator。