React 门户中 nextJS 应用程序的转发样式答案

【问题标题】：Forward style of nextJS app in a React PortalReact 门户中 nextJS 应用程序的转发样式
【发布时间】：2021-07-06 19:31:05
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

您使用什么样的造型解决方案？ Next.js 的 CSS-Modules 还是 styled-jsx？完全不同的东西？在您链接的答案中是一个 CodeSandbox，它展示了一些如何将您的样式注入 iframe 的方法，但这在很大程度上取决于您采用的方法。
@LukasBünger 我为此使用了标准的 CSS 模块！我做了一些到目前为止有效的事情，很快就会发布！

标签： reactjs next.js

【解决方案1】：

这是我目前正在做的事情，请随意重复使用它或提交更好的想法:)

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 并将其注入到 <style> 标记中。到目前为止它运行良好。

【讨论】：