0
599
Views¿Cómo usar Material UI (mui) 5.0 dentro de un iframe?
Estoy tratando de renderizar componentes MUI dentro de un iframe usando el portal de reacción. Aunque se representan dentro del iframe, pierden todos los componentes thMUI y pierden su estilo cuando se representan dentro de un iframe mediante portales de reacción. Toda la documentación/ejemplos y el discurso sobre este tema están relacionados con versiones anteriores de MUI. Esto es aún peor cuando se trabaja con ShadowDOM.
·
Santiago Trujillo
1 answers
Answer question0
MUI usa emoción como un motor de estilo por defecto, y @emotion tiene un CacheProvider para configurar dónde desea colocar los estilos.
const PreviewIframe = styled('iframe')(() => ({ border: 'none', height: '100%', width: '100%' })) const PreviewPortal = (props: PreviewPortalProps) => { const [contentRef, setContentRef] = useState<any>(null) const mountNode = contentRef?.contentWindow?.document?.body const cache = createCache({ key: 'css', container: contentRef?.contentWindow?.document?.head, prepend: true }) return ( <PreviewIframe ref={setContentRef}> {mountNode && ReactDOM.createPortal( <CacheProvider value={cache}> {props.children} </CacheProvider>, mountNode )} </PreviewIframe> ) }Mira estos enlaces para más detalles. https://mui.com/material-ui/getting-started/installation/#npm https://emotion.sh/docs/@emotion/cache#container
·
Santiago Trujillo
Report
Answer question