kgsnaidu commented 5 years ago

Material-UI Componentss not rendering properly when those are inside , I have used many iframe react-comps but still Material UI is not working in any of them.</p>  <p>There already closed threads without proper answers.</p>  <ul> <li>[x] This is not a v0.x issue. </li> <li>[x] I have searched the <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate and I haven't find any solution.</li> </ul> <h2>Expected Behavior</h2> <p>It should render components in iframe as well</p>  <h2>Current Behavior</h2>  <p>It is not rendering the components inside iframe, showing plain html elements without any styles</p> <h2>Steps to Reproduce</h2>

Link: https://codesandbox.io/s/rjo0r3yooo

Please go to sandbox link provided in the above

Context

Your Environment

Tech	Version
Material-UI	v3.5.1
React	v16.6.3
Browser	chrome

kgsnaidu commented 5 years ago

12125

I don't how this issue (#12125) has been closed without fixing it, or if I am missing anything specific to iframe ? If so could you please fix this https://codesandbox.io/s/rjo0r3yooo and share the url back

oliviertassinari commented 5 years ago

Material-UI is not working inside </p> </blockquote> <p>@naniaryan Material-UI <strong>is</strong> working inside iframes, popup, and shadow DOM. Here is an example with an iframe: <a href="https://material-ui.com/demos/app-bar/#bottom-app-bar">https://material-ui.com/demos/app-bar/#bottom-app-bar</a>. The related issues have been closed for a reason. I would have been way better to ask: "How can I use Material-UI inside an iframe?" I know @markdalgleish has already faced this need. The answer isn't obvious, we can improve this story. Going forward, I think that we should:</p> <ul> <li>Add an iframe demo. We use this component in the documentation to render a few of the demos in an iframe: <a href="https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoSandboxed.js">https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoSandboxed.js</a></li> <li>Add a popup demo: <a href="https://codesandbox.io/s/308nkoz2xp">https://codesandbox.io/s/308nkoz2xp</a></li> <li>Add a shadow dom demo #13447</li> <li>Look into simplifying the answer of the problem</li> <li>Fix withWidth ownerDocument logic</li> </ul> <p>@naniaryan Is this something you want to work on? :) I was already tracking this need: <a href="https://trello.com/c/yHhl6Aiz/1017-demo-inside-an-iframe-and-a-popup">https://trello.com/c/yHhl6Aiz/1017-demo-inside-an-iframe-and-a-popup</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kgsnaidu"><img src="https://avatars.githubusercontent.com/u/8776227?v=4" />kgsnaidu</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@oliviertassinari Thanks for prompt response. I have tried your solution(<a href="https://github.com/mui-org/material-ui/blob/01a2042e1e4836e40e63c4cc0ebb0a2828d16d94/docs/src/modules/components/DemoFrame.js">example</a>) however styles are still broken.</p> <p>Kindly check and please let me know If I am missing anything. Find below sandbox link: <a href="https://codesandbox.io/s/p799pp1qzx">https://codesandbox.io/s/p799pp1qzx</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bcapinski"><img src="https://avatars.githubusercontent.com/u/28545011?v=4" />bcapinski</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Your example works without <DemoFrame> and in a normal <iframe> (copied to Stackblitz). Is it something wrong with that component?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/HugoMag"><img src="https://avatars.githubusercontent.com/u/991150?v=4" />HugoMag</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hi @naniaryan I've tried to use your solution to add Material UI to several iframes (we develop a widget that adds several iframes) but I can't seem to make it work. The css in correctly injected on the first frame but not on the second. From what I gathered the style elements are not added to the second frame. Please check the code at: <a href="https://codesandbox.io/s/9nnp8xl04">https://codesandbox.io/s/9nnp8xl04</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jrdn91"><img src="https://avatars.githubusercontent.com/u/1076459?v=4" />jrdn91</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@bcapinski I too am having an issue getting the iframe example to work. You mention above that @naniaryan example works, however, it does not and copying directly from the source and attempting to use it in code doesn't work either. It seems the actual implementation on the <code>AppBar</code> component demo you point to looks similar to our implementation of it but still, the same result happens between the both of us. The react app renders but it does not inject the styles into the given iframe, but instead to the main body. Is this something we should take up with the jss repo instead?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rajithaw"><img src="https://avatars.githubusercontent.com/u/5545438?v=4" />rajithaw</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@HugoMag Your solution works as long as there are no Material UI components outside the frame. When a component is added outside the frame, components inside the frame looses their styles. As seen in this demo: <a href="https://codesandbox.io/s/jj3q079m75">https://codesandbox.io/s/jj3q079m75</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rajithaw"><img src="https://avatars.githubusercontent.com/u/5545438?v=4" />rajithaw</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Finally got it to work after updating the packages and adding the following lines of code.</p> <p><code>import { install } from "@material-ui/styles";</code> <code>install();</code></p> <p>demo: <a href="https://codesandbox.io/s/rykq8nz4j4">https://codesandbox.io/s/rykq8nz4j4</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@siriwatknp Here is an iframe example with v4: <a href="https://codesandbox.io/s/v0kvljw0r3">https://codesandbox.io/s/v0kvljw0r3</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/martinmckenna"><img src="https://avatars.githubusercontent.com/u/7387001?v=4" />martinmckenna</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@oliviertassinari I'm assuming this should be working no problem with hooks?</p> <p>e: Ah it's because I'm not on v4?</p> <p>MUI versions</p> <pre><code> "@material-ui/core": "^3.9.3", "@material-ui/icons": "^3.0.2", "@material-ui/styles": "^3.0.0-alpha.10",</code></pre> <p>I keep getting <code>contentDocument</code> being undefined with this code:</p> <pre><code class="language-js">let contentDocument: any; let contentWindow: any; const _Frame: React.FC<CombinedProps> = (props) => { const { children, classes } = props; const handleRef = (ref: any) => { const newContentDocument = pathOr(null, ['node', 'contentDocument'], ref); const newContentWindow = pathOr(null, ['node', 'contentWindow'], ref); if(!!newContentDocument) { contentDocument = newContentDocument } if(!!newContentWindow) { contentWindow = newContentWindow; } } const [isReady, setReady] = React.useState<boolean>(false); const [jss, setJss] = React.useState<any>(undefined); const [sheetsManager, setSheetsManager] = React.useState<any>(undefined); const [container, setContainer] = React.useState<any>(undefined); const contentDidMount = () => { setReady(true); setJss(create({ plugins: [...jssPreset().plugins, rtl()], insertionPoint: contentWindow['demo-frame-jss'] })); setSheetsManager(new Map()); setContainer(contentDocument.body); } const contentDidUpdate = () => { contentDocument.body.dir = props.theme.direction } return ( <NoSsr> <Frame ref={handleRef} className={classes.root} contentDidMount={contentDidMount} contentDidUpdate={contentDidUpdate} > <div id="demo-frame-jss" /> {isReady ? ( <StylesProvider jss={jss} sheetsManager={sheetsManager}> {React.cloneElement(children as React.DetailedReactHTMLElement<any, HTMLElement>, { container, })} </StylesProvider> ) : null} </Frame> </NoSsr> ); }; const styled = withStyles(styles, { withTheme: true }); export default compose<CombinedProps, {}>( styled, // React.memo )(_Frame);</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@martinmckenna The documentation has an iframe "mode" that works with v3: <a href="https://material-ui.com/demos/app-bar/#bottom-app-bar">https://material-ui.com/demos/app-bar/#bottom-app-bar</a> and v4: <a href="https://next.material-ui.com/demos/app-bar/#bottom-app-bar">https://next.material-ui.com/demos/app-bar/#bottom-app-bar</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/martinmckenna"><img src="https://avatars.githubusercontent.com/u/7387001?v=4" />martinmckenna</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@oliviertassinari I'm not seeing any iframe mode in the links you posted? Am I missing something here?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@martinmckenna The bottom app bar demo is rendered inside an iframe.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/martinmckenna"><img src="https://avatars.githubusercontent.com/u/7387001?v=4" />martinmckenna</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Ok. In this case, it seems like upgrading to v4 is really my only option.</p> <p>The styles are not being applied with the previous examples and attempts to use @rajithaw solution resolves in more problems because I've added properties to the base MUI Theme</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rumpl"><img src="https://avatars.githubusercontent.com/u/99933?v=4" />rumpl</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hey, the <a href="https://codesandbox.io/s/308nkoz2xp">demo with the popout</a> doesn't work, the menu is not styled in the popout window. I'm trying to do something like this but can't make it copy the styles to the new window when they change. Any ideas how to make the demo work?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@rumpl Thanks for the report. We should update the code sandbox examples for v4.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rumpl"><img src="https://avatars.githubusercontent.com/u/99933?v=4" />rumpl</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Thanks! </p> <p>In the meantime, do you have some pointers on how I could implement it? I tried to play with the <code>StylesProvider</code> and custom jss but didn't manage to make it work.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>The process should be similar to how we make the iframe demos work in the documentation.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@rumpl Here is a rough example that works for the styles: <a href="https://codesandbox.io/s/308nkoz2xp">https://codesandbox.io/s/308nkoz2xp</a>. Now, it seems to have an issue with the popover positioning logic.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rumpl"><img src="https://avatars.githubusercontent.com/u/99933?v=4" />rumpl</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@oliviertassinari thanks! This will help me a lot!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@rumpl My demo code is really garbage, you can simplify it, there is no doubt :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rumpl"><img src="https://avatars.githubusercontent.com/u/99933?v=4" />rumpl</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Sure sure, I'm using a different solution for the popup that uses react portals, will try to make it work with what I have already in place.</p> <p>Thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/amitava82"><img src="https://avatars.githubusercontent.com/u/1279530?v=4" />amitava82</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>The examples on codesandbox works but when I download the same package and run locally, it does not 😕 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Jack-Works"><img src="https://avatars.githubusercontent.com/u/5390719?v=4" />Jack-Works</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>In our project, we use Material-UI in ShadowRoot. We've resolved the problem and use it in production.</p> <p>To archive this, I write a custom JSS Renderer and use a new web feature called Constructable StyleSheets to dispath stylesheets between different ShadowRoots.</p> <p>Our solution also works for MUI's portal.</p> <p><a href="https://github.com/DimensionDev/Maskbook/tree/master/src/utils/jss">https://github.com/DimensionDev/Maskbook/tree/master/src/utils/jss</a></p> <p>This is a AGPL-v3-or-later project, but the core of the custom JSS renderer <code>ConstructableStyleSheetsRenderer</code> is MIT licenced to the JSS project.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/oliviertassinari"><img src="https://avatars.githubusercontent.com/u/3165635?v=4" />oliviertassinari</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>We see this use case come up every now and then. We have no dedicated demo for it, we could.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Jack-Works"><img src="https://avatars.githubusercontent.com/u/5390719?v=4" />Jack-Works</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I will repost a new demo for both JSS and emotion that renders in a ShadowRoot. We've recently made a refactor on our codebase and make the ShadowRoot part separate from our business code.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Jack-Works"><img src="https://avatars.githubusercontent.com/u/5390719?v=4" />Jack-Works</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p><a href="https://codesandbox.io/s/nostalgic-cloud-d2ny7?file=/src/Demo.tsx">https://codesandbox.io/s/nostalgic-cloud-d2ny7?file=/src/Demo.tsx</a></p> <p>All UI in the code sandbox above is rendered in the ShadowRoot. You can verify that by the devtools.</p> <ul> <li>It can handle all emotion-based components (all MUI components in v5, and <code>styled</code> API).</li> <li>It can also handle all JSS based components (all MUI components in v4 and <code>makeStyles</code> API).</li> <li>It contains a <code>usePortalShadowRoot</code> hooks to handle Modals (which needs to render across different Shadow Roots).</li> </ul> <pre><code class="language-ts">const picker = usePortalShadowRoot((container) => ( <DatePicker DialogProps={{ container }} PopperProps={{ container }} value={new Date()} onChange={() => {}} renderInput={(props) => <TextField {...props} />} /> ))</code></pre> <p>Note: <strong>Our application is licensed in AGPLv3, you may not be able to reuse this code otherwise the license will spread into your project</strong>. This solution is quite hacky and might have a potential performance problem.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/hoangbn"><img src="https://avatars.githubusercontent.com/u/38968280?v=4" />hoangbn</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Is there an iframe example with mui v5 yet?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/samuelsycamore"><img src="https://avatars.githubusercontent.com/u/71297412?v=4" />samuelsycamore</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>Revisiting this issue in Q4 '23—I'm not aware of any demos of Material UI components rendering inside an iframe, and an Algolia search for "iframe" in the docs doesn't turn up anything useful.</p> <p>To close this issue, I think we need:</p> <ul> <li>a doc explaining the use case and the solution</li> <li>at least one demo showing the implementation</li> </ul> <p>Personally, I don't know how to pull this off, and all of the code snippets in this issue are broken or outdated at this point. Has anybody out there tried to get v5 components working in an iframe?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/amitava82"><img src="https://avatars.githubusercontent.com/u/1279530?v=4" />amitava82</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>Here is a working example with react-frame-component</p> <p><a href="https://codesandbox.io/p/sandbox/mui-v5-iframe-example-xftkp4">https://codesandbox.io/p/sandbox/mui-v5-iframe-example-xftkp4</a></p> <p>Import to keep in mind is to disable portal for any popper components</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

mui / material-ui

[material-ui][docs] Add examples rendering in iframes, popups, and shadow DOM #13625

Context

Your Environment

12125