在每个故事的故事书中应用不同的主题答案

【问题标题】：Apply a different theme on a per story basis storybook在每个故事的故事书中应用不同的主题
【发布时间】：2021-06-01 00:07:01
【问题描述】：

我正在 Storybook (v6.1.14) 中制作一个反应组件库

我有两个不同的主题，基本上是明暗版。
我将我所有的故事都包含在<ThemeProvider> 中，如下所示：

import React from "react"
import {dark} from "../src/Themes/Theme";
import { ThemeProvider } from "styled-components";
import { GlobalStyles } from "../src/lib/Themes";

// apply our projects theme to our stories
const ThemeDecorator = storyFn => (
  <ThemeProvider theme={dark}>
        <GlobalStyles />
        {storyFn()}
    </ThemeProvider>
)

export default ThemeDecorator;

这是通过preview.js 文件应用的，如下所示：

const { addDecorator } = require("@storybook/react");
import ThemeDecorator from "./themeDecorator"

// Add our project theme, add a global stylesheet
addDecorator(ThemeDecorator);

所以现在所有内容都应用了深色主题，但是，对于每个组件，我想展示两个故事：一个用于浅色主题，一个用于深色主题 - 我如何让一个故事呈现与另一个不同的主题全局声明？

【问题讨论】：

标签： javascript reactjs styled-components storybook

【解决方案1】：

我也遇到了同样的问题。从 Storybook 文档中，我找到了 this answer。

所以基本上，您可以将decorators 与您的模板一起使用并对其应用样式。

const Template: Story<LogoProps> = (args) => {
  const { version } = args;
  return <Logo {...args} version={version} />;
};

export const Light = Template.bind({});
Light.args = {
  version: 'light',
};
Light.decorators = [
  (LightLogo) => (
    <div style={{ backgroundColor: 'black', padding: '5px 7px' }}>
      <LightLogo />
    </div>
  ),
];

【讨论】：