如何从Storybook中的样式化组件渲染全局样式?

时间:2019-08-14 15:16:17

标签: javascript reactjs config styled-components storybook

尝试向配置文件中添加全局样式时无法呈现故事书应用程序。

在我尝试添加旋钮插件之前,它一直在工作,但是它坏了,但是我删除了与插件有关的所有内容,但仍然给我带来了问题

config.js

import React from 'react';
const { withPropsTable } = require('storybook-addon-react-docgen');
const req = require.context('../src/', true, /\.stories.jsx$/);
import { configure, addDecorator } from '@storybook/react';
import GlobalStyle from './../src/global/GlobalStyle';


function withGlobalStyles(storyFn) {
  return (
    <React.Fragment>
      <GlobalStyle />
      {storyFn()}
    </React.Fragment>
  );
}

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(withPropsTable);
addDecorator(withGlobalStyles);
configure(loadStories, module);

错误:

./.storybook/config.js中的

错误 模块构建失败(来自./node_modules/react-scripts/node_modules/babel-loader/lib/index.js): SyntaxError:/Users/.storybook/config.js:意外令牌(22:2)

  20 | 
  21 | addDecorator((storyFn) => (
> 22 |   <div>
     |   ^
  23 |       <GlobalStyle />
  24 |       {storyFn()}
  25 |   </div>

它应该以全局样式呈现应用程序。

0 个答案:

没有答案