I'm working on a React App which embeds widgets via <iframe>s. Those widgets also are React apps. Both, the app and the widgets, make use of the same component library (an own one).
This component library provides a <Modal> component, displaying some content in a floating container styled with a backdrop.
If now a widget renders such a <Modal>, this <Modal> of course is bound to the <iframe>s DOM and thus displayed in the boundaries of that <iframe>. And a non-centered <Modal> with a limited backdrop looks ugly.
So I just tried to add that <Modal>'s React portal not to the current document, but to the parent.document (if available and different from the current document).
And well, that works, kind of. The <Modal> is now a child of the parent DOM and thus centers in that viewport.
But if I want to render another custom component, like a <Button> in that <Modal>, all the styles (currently defined via SASS and applied via className) are just not available. These stylings remain in the child DOM :(
Currently, my only idea to solve this is to switch to inline styles. That means I would switch to CSS-in-JS to still have something similar to CSS classes and apply those styles via the style attribute to the nodes.
Since that would make it necessary to modify all components which are used in a <Modal>, I would like to reach out for other ideas and approaches.
Is there another approach how render an <iframe>'s <Modal> using the viewport of the outer app? Or is there a solution on how to also propagate style sheets from the inner DOM to the outer DOM?