'How to render global styles from styled-components in Storybook?
Cannot render storybook application when trying to add global styles to the config file.
It was working before and when I tried to add the knobs addons it broke but I removed everything that has to do with the addon and it is still giving me issues
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);
Error:
ERROR in ./.storybook/config.js Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js): SyntaxError: /Users/.storybook/config.js: Unexpected token (22:2)
20 |
21 | addDecorator((storyFn) => (
> 22 | <div>
| ^
23 | <GlobalStyle />
24 | {storyFn()}
25 | </div>
It should render the application with global styles.
Solution 1:[1]
In storybook >6.X you can add decorators to your preview.js
config file
//./storybook/preview.js
import { addDecorator } from "@storybook/react";
import GlobalStyle from "../path_to_your_styles/GlobalStyles";
addDecorator((story) => (
<>
<GlobalStyle />
{story()}
</>
));
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Rafo |