如何通过故事书传递我的组件主题？答案

【问题标题】：How do I pass my components theme through storybook?如何通过故事书传递我的组件主题？
【发布时间】：2019-12-06 11:30:55
【问题描述】：

我需要传递一个在组件中使用的主题，但出现语法错误。

我的 .storybook/config.js：

import { configure, addDecorator } from '@storybook/react'
import React from 'react'

import theme from '../src/theme'
import { ThemeProvider } from 'styled-components'
import '../src/styles/index.css'

addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>)

function loadStories() {
  const req = require.context('../src', true, /\.stories.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

这是完整的错误：

【问题讨论】：

你有最新版的故事书吗？
我想是的。我按照故事书网站上的说明进行操作。
你能发布你的 Webpack 配置吗？

标签： reactjs styled-components storybook

【解决方案1】：

您是否尝试过在不使用装饰器的情况下将主题提供程序作为单独的文件？下面是 Styled-components 和 typescript 的实现。

import React from 'react';  

export const Container = ({ title, children }) => {
   return (
    <StoryWrapper>
      <GlobalStyle theme={themes.default} />

        <ThemeProvider theme={themes.default}>
          <MainWrapper>
            <Header>{title}</Header>
            {children}
          </MainWrapper>
        </ThemeProvider>

    </StoryWrapper>
  );
};

我从未使用过添加装饰器功能，这是我使用的配置实现，但它是为 tsx 设置的。

import { addParameters, configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

const req = require.context('../src', true, /.stories.tsx$/);
function loadStories(){
    req.keys().forEach(req);
}

addDecorator(withKnobs);

configure(loadStories, module);

【讨论】：

【解决方案2】：

似乎 Babel 对您在 JS 文件中使用 JSX 感到困惑。

尝试将config.js 重命名为config.jsx。文件扩展名应该指示 babel 将其视为 JSX 文件。

【讨论】：

感谢您的评论。我试过了，没用