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

Posted 2023-03-15

【中文标题】在每个故事的故事书中应用不同的主题

【英文标题】：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);

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

【参考方案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>
  ),
];