Question

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

我的.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)

我收到一个SyntaxError错误：

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/karolis/usercentric/wiise-wiki/.storybook/config.js: Unexpected token (8:22)

   6 | import '../src/styles/index.css'
   7 | 
>  8 | addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>)
     |                       ^

Answer 1

您是否尝试过将主题提供程序作为单独的文件而不使用装饰器？以下是样式化组件和打字稿的实现。

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

Answer 2

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

尝试将'重命名为UPDATE "2018_01" SET emodnet_code = shiptype_emodnet.emodnet_type FROM "shiptype_emodnet" WHERE "2018_01".aisshiptype = shiptype_emodnet.aisshiptype;。文件扩展名应指示babel将其视为JSX文件。

为什么我要通过故事书传递组件主题？

2 个答案: