Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using injectGlobal/keyframes with StyleSheetManager #1354

Closed
Fer0x opened this issue Dec 15, 2017 · 1 comment
Closed

Using injectGlobal/keyframes with StyleSheetManager #1354

Fer0x opened this issue Dec 15, 2017 · 1 comment

Comments

@Fer0x
Copy link
Contributor

Fer0x commented Dec 15, 2017

Follow-up from #1324
When using StyleSheetManager with frame as target, keyframes and injectGlobal will be applied only to parent window <head />. We need the ability to insert global styles and keyframes inside <StyleSheetManager />.

As solution we can add new components: `.

Example usage with global styles:

import React from 'react';
import { injectGlobal, StyleInjector } from 'styled-components';

const globalStyles = injectGlobal`
  body: {
    // ...
  }
`;

const MyComponent
<StyleSheetManager target={frame}>
  <div>
    <StyleInjector name={globalStyles} />
  </div>
</StyleSheetManager>

Example with keyframes:

import React from 'react';
import { keyframes, StyleInjector } from 'styled-components';

const animationName = keyframes`
  0% { color: transparent; }
  100% { color: radboats; }
`;

<StyleSheetManager target={frame}>
  <div>
    <StyleInjector name={animationName} />
  </div>
</StyleSheetManager>

That component will get componentId by provided prop name, then grab corresponding styles from global Stylesheet instance and insert them to closest StyleSheetManager target.
@mxstbr
Copy link
Member

mxstbr commented Dec 15, 2017

Going to close this as a duplicate of #1333, we haven't thought of any solutions for keyframes yet though, feel free to suggest your API there!

@mxstbr mxstbr closed this as completed Dec 15, 2017
@Fer0x Fer0x mentioned this issue Dec 15, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Fer0x @mxstbr