Estoy creando un iframe para mostrar un componente funcional (ReactJS) en su propio silo. El iframe aparece con todo el contenido, pero no se aplica CSS.

He usado esta respuesta para escribir algo de JavaScript que debería aplicar mi hoja de estilo principal al iframe:

 import stylesheet from '../../main.css' export default function FunctionalIFrameComponent({ children, title, ...props }) { const iframeRef = useRef() const mountNode = iframeRef?.current?.contentWindow?.document?.body useEffect(() => { if(iframeRef.current) { console.log(stylesheet) let cssLink = document.createElement("link") cssLink.href = "file://../../main.css"; cssLink .rel = "stylesheet"; cssLink .type = "text/css"; iframeRef.current.contentWindow.document.body.appendChild(cssLink) } }, [iframeRef]) return ( <iframe title={title} {...props} ref={iframeRef}> {mountNode && createPortal(children, mountNode)} </iframe> ) }

Sin embargo, no se aplican estilos.

Cuando registro el contenido de la variable de la stylesheet de estilo, solo se devuelve un objeto vacío (es decir, {} ).

¿Cómo debo cargar mi hoja de estilo en el iframe?