Reactjs '；样式化组件'；在CRA micro前端应用程序中初始化

我正在运行一个具有多个React版本的微型前端应用程序，每个微型前端repo都使用延迟加载来动态加载其React版本，并且它可以按预期工作（耶！） 微型前端应用程序的结构如下：

话虽如此，我遇到了样式化组件多版本控制问题，并在开发模式（非生产模式）下收到以下控制台警告：

有关更多技术细节，请查看带有实现的

由于应用程序使用CRA来简化webpack/babel的配置，我想知道是否有一个好方法来改进初始配置以解决此控制台警告

我检查了警告上共享的链接，虽然我理解micro frontend不是维护项目的最佳方式，但我们仍然希望为用户提供此选项，因为他们可能需要逐步迁移其项目版本，因此我仍然对解决此控制台警告感兴趣

任何提示或建议的解决方案将不胜感激

印刷警告：

react_devtools_backend.js:2430看起来在这个应用程序中初始化了几个“样式化组件”实例。这可能会导致动态样式无法正确渲染、再水化过程中出现错误、缺少主题道具，并在没有充分理由的情况下使应用程序变大。 有关更多信息，请参阅

---

我的微服务应用程序也有同样的问题。对于每个微服务，我都有package.json文件，对于所有微服务，我都有一个global package.json文件。因此，在我添加的global package.json解析中，它只允许我的应用程序使用一个版本的样式化组件

“分辨率”：{“样式化组件”：“4.2.1”}，

而且，我以前也喜欢

lerna

。它可以帮助您解决微服务的依赖关系

---

我希望我的回答能帮助您解决问题。

我也面临同样的问题，我通过将所有样式化组件移动到远程应用程序中并从中公开它们来解决问题。

样式化组件库正在通过全局变量检查其他实例。特别是窗口[''''.'样式化组件-init']。我看到的唯一方法是使用iframe，因为它们有自己的全局作用域，或者通过模块联合实际共享样式化组件库。尽管如此，模块联合需要创建自定义的webpack.config.js和webpack 5，这对于react脚本来说并不容易，因为您无法以本机方式扩展内部的webpack.config.js。这两种解决方案都严重限制了构建过程，所以我想这是没有选择的？谢谢，@MircoS.，我很难想象在这样一个常见的用例中，它们不会提供一种解决此警告的方法。实际上，我开始注意到我在其他平台上看到了这个警告，比如使用样式化组件的代码沙盒模板等等。我确实认为应该有一种方法来处理这个问题——尽管我还在寻找：）单独构建每个微前端可以吗？所谓“单独”，是指每个微前端都有自己的package.json吗？我认为这是推荐的设计，因为每个应用程序都是独立编程的。请参阅React的微型前端代码示例感谢@Egor分享您的见解和经验！不幸的是，我确实需要在每个微型前端应用程序上运行多个版本的样式化组件。用单一版本的样式化组件限制整个应用程序不是目标，我希望每个应用程序都能运行多个版本，而不出现控制台警告。谢谢@Nida！您是否能够支持多个样式化的组件版本而不看到此体系结构中的警告？你有可以共享的项目吗？我使用了相同版本的样式化组件。