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

Question

我正在 Storybook 中制作一个 React 组件库（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);

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

Answer 1

我也遇到了同样的问题。从故事书文档中，我找到了这个答案。

所以基本上，您可以将

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>
  ),
];

Answer 2

1. 确保您的文件位于 TSX，因为这会导致打字稿错误

2. 遵循装饰者的故事书结构

   //.storybook/preview.tsx

   import React from 'react';
   
   import { Preview } from '@storybook/react';
   
   import { ThemeProvider } from 'styled-components';
   
   const preview: Preview = {
     decorators: [
       (Story) => (
         <ThemeProvider theme="default">
           {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
           <Story />
         </ThemeProvider>
       ),
     ],
   };
   
   export default preview;
   

官方文档： https://storybook.js.org/docs/react/writing-stories/decorators