js-stylesheet issues when used in iframe context

[darthtrevino]

When using react-tabs in tandem with react-frame-component, the tabs end up in the parent document instead of the embedded document.

[joepvl]

I'm not sure I follow completely; do the tabs end up in the parent document, or the styles generated by js-stylesheet, or both? If it's just the styles, that sounds like an integration issue between js-stylesheet and react-frame-component to me.

Also in that case, if the tabs do render inside the iframe generated by react-frame-component, you could work around this issue by simply calling Tabs.setUseDefaultStyles(false); once somewhere in your code, and proceeding to inject your own styles into the iframe using the head prop. If you really want to use the default styles, you can always use your browser's devtools to copy the styles generated by js-stylesheet from the DOM tree (before you disable default styles, I mean) and paste them into your code. I imagine it could look something like this :

const tabStyles = '... the styles you copied earlier ...';

// ...

render() {
  return (
    <Frame head={<style>{tabStyles}</style>}>
      <Tabs>
        { /* ... etc. */ }
      </Tabs>
    </Frame>
  );
}

[danez]

If it is a problem with js-stylesheet, then this will be solved in 1.0 as js-stylesheet wont be used anymore.

[darthtrevino]

@joepvl I ended up copying the styles from the parent document into the iframe, but it's still a little wonky: the parent document ends up with styles that are meaningless to it. If you guys are removing the js-stylesheet dependency, then that's perfect. You can either close this immediately or when you release 1.0.