Блог

Я создаю расширение Chrome, и мне нужно выполнить изоляцию стилей с помощью iframe, в частности ‘react-frame-component’, и я использую styled-components для стилей, но сгенерированные классы не вводятся в iframe, есть идеи о том, как я могу внедрить их в iframe?

Вы можете достичь этого с помощью обычного <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}
  />
);