Storybook: Importing global style of styled-component for all stories

[eldyvoon]

This is not really a bug but I'm stuck importing global style of styled-component, for now I have to include it in every single of my story

import { storiesOf } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'

import MyComponent from '../components/MyComponent'
import { GlobalStyle } from '../pages/layout'

const stories = storiesOf('MyComponent', module)
stories.addDecorator(withKnobs)

stories.add(
  'My Component',
  () => (
    <>
      <GlobalStyle />
      <MyComponent />
    </>
  )
)

[tmeasday]

Hi @eldyvoon,

The best approach here is to add a global decorator

// in config.js

import { addDecorator } from '@storybook/react';

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

[omaracrystal]

How would I import into Angular Storybook all of my global styles (scss) with several imports such as: Normalize, Base, Mixins, Variables, Thirdparty?

[jack-sf]

Is there any other approach? This causes the GlobalStyle to be mounted and unmounted on each story mount. Which is impacting the performance.

For example, in our case, we have @font-face declarations in that GlobalStyle. So now, the fonts are being queried from the server and reloaded every time we navigate to a different story. This is actually visible for the users - even if the fonts are cached, on some of the browsers for the first ~100ms after each story navigation, the fonts are being loaded (thus, they have different font family for the first ~100ms).

[jack-sf]

Maybe we could mount that component only once, i.e. in loadStories fn (that is passed to configure(loadStores, module) of @storybook/react ?

[jack-sf]

For now we have moved that into that loadStories fn like that:

import { render } from 'react-dom';
import { GlobalStyle } from '../../theme/GlobalStyle';

function loadStories() {
  const globalStyleEl =
    document.querySelector('#gen3-global-style') ||
    (() => {
      const el = document.createElement('div');
      el.id = 'gen3-global-style';
      document.head.append(el);
      return el;
    })();
  render(<GlobalStyle />, globalStyleEl);

  ...
}

and it works.

I don't know if that function passed to configure is the best place to do such things, but that's where we had put global css in previous apps (using sass instead of styled components) before and it worked as well.

[carolinmaisenbacher]

Thank you jack-sf!
The solution worked for me.

It took me a while, because the render method wasn't working at first.
I then realized it comes from ReactDOM.

This is how I called it now:

 import ReactDOM from 'react-dom'

function loadStories() {
  …
  ReactDOM.render(<GlobalStyles />, globalStyleEl);
}

[Sergioamjr]

With Storybook 6x I loaded my global style like this;

//.storybook/preview.js
import { addDecorator } from "@storybook/react";
import { GlobalStyle } from "./../pages/_app";

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