我正在使用 next.js 开发一个应用程序，出于一个目的，我需要在 iframe 中使用 React 门户。在那里找到https://stackoverflow.com/a/34744946/5860648 ，效果很好:我的组件呈现在 iframe 中并与整个应用程序交互，即使它不在同一页面中也是如此。

只剩下一件事:next.js 会自动在我的根网页中插入样式。

我想获取该样式并将其复制/转发到 iframe 中，以便门户内的内容使用我制作的样式。

我没有从文档或网络中找到任何可以正确执行此操作的内容...因此，如果有人已经找到了一个好技巧，那将非常有帮助!

谢谢!

最佳答案

这是我目前所做的，请随意重用它或提交更好的想法:)

const completeStyle = () => {
      let style = "";
      for (let styleSheet of document.styleSheets) {
        try {
          if (styleSheet.cssRules) {
            for (let cssRule of styleSheet.cssRules) {
              style += cssRule.cssText;
            }
          }
        } catch (e) {}
      }
      return style;
};

基本上，我扫描我主页中加载的整个样式表，连接每个可用的 cssRules 并将其注入(inject)到 <style> 中。标签。到目前为止它工作正常。

https://stackoverflow.com/questions/67046168/