Emotion: Rendering to iframe (different emotion context)

[tolmasky]

I have a React app that renders to many iframes. Think something like:

React.render(<Something/>, iframe1.contentWindow.document.getElementById("one"));
React.render(<Something/>, iframe2.contentWindow.document.getElementById("two"));

As such, I need to be able to do two things: 1) have the styles added to their respective iframes. 2) Have the styles not be merged (in other words, maintain two separate (or N separate) emotion contexts. The latter I'm thinking I can maybe pull off with emotion-create, but I'm not sure if thats the appropriate use of that, and additionally, its also just not clear to me how to get all the child components using the right emotion (I hope I don't have to manually pass it down or something).

[tolmasky]

My current thinking is to simply reflect the contents of the generated stylesheet down to the iframe. So, imagine something along the lines of:

on_emotion_stylsheet_change(function ()
{
      for (iframe of iframes)
         iframe.contentWindow.document.getElementById("stylesheet").innerText = stylesheet.innerText
})

The tricky part is the on_emotion_stylsheet_change of course. I'd prefer not to use a MutationObserver, so I could monkey patch CSSStyleSheet.insertRule and handle the mutations manually.

However, if create-emotion allowed you to pass in your own StyleSheet class, I could just make SharedStyleSheet, which knew how to handle insertRule, etc. Any chance that could be a supported option?

[tkh44]

create-emotion is what you need.

https://github.com/emotion-js/emotion/blob/master/packages/create-emotion/README.md

I've updated to readme to be a bit more clear.

I'm going to close this issue but feel free to open others 👍

[jepser]

I checked create-emotion but it expects a container element.

In my case, I have something like <div data-my-app={id}></div>, in which I dynamically create an iframe and mount my React app, in the page I could have several ID.

I found an example, but it doesn't work for me: https://medium.com/@EubeneSa/how-to-ensure-your-emotion-css-in-js-styles-are-indeed-overwriting-existing-and-or-c6a099c58010

Having to set the container before I have the node, makes me think, how could it be the way to do

import styled from './my-createEmotionStyled-instance'

By context? Any suggestions are welcoming thanks!

[tomasfrancisco]

I'm having exactly the same use case as @jepser and I couldn't find any solution yet.

[Andarist]

@tomasfrancisco u might want to look into this - https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706

still experimental but emotion@10 should solve ur problem

[tomasfrancisco]

Thank you @Andarist! That's exactly what I was looking for 👍