如何将样式化组件注入React iframe

Question

我正在构建一个chrome扩展，我需要使用iframe进行样式隔离，特别是'react-frame-component‘，我使用了样式组件，但是生成的类没有注入到iframe中，你有什么想法可以把它们注入到iframe中吗？

Answer 1

你可以用普通的<iframe/>标签实现这一点。

const iFrame = useRef(null);

const applyStyle =  (ele: Document) => {
    const styleTag = document.createElement("link");
    styleTag.type = "text/css";
    styleTag.rel = "stylesheet";
    styleTag.href = "../styles.css";
    ele.head.appendChild(styleTag);
}

const onLoad = () => {
    applyStyle(iFrame.current.contentDocument);
}  

return (
   <iframe 
      id="doc-iframe"
      frameBorder="0"
      scrolling={"yes"} 
      src={url} 
      ref={iframeRef}
  />
);