Emotion: Feature: ability to remove style injected with injectGlobal

[slorber]

• emotion version: latest
• react version: latest

Relevant code.

const removeStyle = injectGlobal` ... `;

What you did:

I'm using Storybook:

storiesOf('TestLayout', module)
  .add(
    'layout 1',
    withInfo(`info`)(() => {
      injectGlobal`
        body { background-color: red; }
    `;
      return <div>this is my red layout</div>;
    }),
  );

storiesOf('TestLayout2', module)
  .add(
    'layout 2',
    withInfo(`info`)(() => {
      injectGlobal`
        body { background-color: blue; }
    `;
      return <div>this is my blue layout</div>;
    }),
  );

What happened:

• Display layout 1: background is red
• Display layout 2: background is blue
• Display layout 1: background is blue (but should be red)

I understand why this happens, just wondering if it's possible to unregister previously registered global styles. I'd like to be able to do:

class WithGlobalStyle extends React.Component {
  componentDidMount() {
    this.removeStyles = injectGlobal`${this.props.globalStyle}`;
  }
  componentWillUnmount() {
    this.removeStyles();
  }
  render() {
    return this.props.children;
  }
}

I think this pattern could be helpful in many situations to manage global style differently according to the current app page. We already have similar components for page metadatas (ie Helmet) or RN has component too in a similar way.

Reproduction: N/A

Suggested solution: implement the feature

[Andarist]

Your use case is already covered by upcoming emotion@10. I doubt it can get into 9 release line though.

[slorber]

good to know ;)

I've got a working workaround where i force a storybook refresh just after leaving a component that needs custom global style (based in hacky localstorages/decorators). I can wait, just wanted to show interest for this feature ;)

[mitchellhamilton]

This is possible with the Global component in v10.

https://codesandbox.io/s/xr34o801op

[ferrybrouwer]

The only problem is Emotion 10 is not supported in Storybook 4.2.x yet