如何從 Storybook 中的樣式組件渲染全局 styles？

Question

嘗試將全局 styles 添加到配置文件時無法呈現故事書應用程序。

它在我嘗試添加旋鈕插件之前和當它壞了但我刪除了與插件有關的所有內容時仍然有效，但它仍然給我帶來問題

配置.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>

它應該使用全局 styles 呈現應用程序。

Answer 1

在 storybook >6.X 中，您可以將裝飾器添加到preview.js配置文件中

//./storybook/preview.js

import { addDecorator } from "@storybook/react";
import GlobalStyle from "../path_to_your_styles/GlobalStyles";

addDecorator((story) => (
  <>
    <GlobalStyle />
    {story()}
  </>
));