-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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.
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
@emotion/css
does not use the CacheProvider
#2409
Comments
I recommend using either |
Understood. Thanks for your response. I'm a little confused though, what's the best/most canonical way to write this type of component using function Spacer({ marginTop, className, children }) {
const classes = cx(className, css({ marginTop }));
return <div className={classes}>{children}</div>;
} Is this just not a style of component supported by Emotion? Update: Never mind. After some thought it's easy to just write the above component as a const Spacer = styled.div`
${(props) => css({ marginTop: props.marginTop })}
`; |
Current behavior:
Essentially, the
css
function from@emotion/css
doesn't allow styles to be applied inside of an iframe, whereasstyled
works just fine.To reproduce:
This codesandbox demonstrates the issue: https://codesandbox.io/s/solitary-hooks-l8b03?file=/src/App.js
Expected behavior:
I expect the
@emotion/css
function to provide some mechanism for hooking into the current CacheProvider so that styles generated with it can be put into the correctdocument.head
inside of an iframe.I think it makes sense to me that this doesn't work, the
css
function from@emotion/css
only returns a classname afterall and there's nothing that happens at runtime for those classnames to be processed into the CacheProvider (unlike thestyled
components which are able to use the CacheProvider at runtime).However, I think it would be reasonable to provide some kind of utility function similar to
cx
but that respects the current cache provider so that styles generated with@emotion/css
are able to be injected into the appropriatedocument.head
.Is this an unreasonable expectation or something that could be possible? I'm happy to help contribute a solution for this if given guidance on where and how to solve this problem.
To be clear, this may be more of a feature request than a bug, I'm not sure what the expected behavior of the library is, but at the very least it's confusing and should be documented somehow if the current behavior is how it is meant to work.
Environment information:
react
version: 16.14.0@emotion/react
version: 11.4.0Prior art:
The text was updated successfully, but these errors were encountered: