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

Question

我正在构建一个 chrome 扩展，我需要使用 iframe 进行样式隔离，特别是“react-frame-component”，并且我使用 styled-components 作为样式，但生成的类没有注入 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}
  />
);