我有一个模块联合远程存储库，它是：
1.使用React 17
- material-ui 4包括jss
1.有自己的全球css从第三方图书馆，我不能编辑
我有多个主机，它们是：
1.使用不同版本的react 16构建，短期内没有升级的余地
1.使用材料ui 3包括jss
1.拥有来自其他第三方库的自己的全局CSS
有没有一种方法可以设计我的遥控器，使它可以在像这样的不同环境中工作？
我已经尝试了很多例子，但没有一个是完整的解决方案：
https://github.com/module-federation/module-federation-examples
1条答案
按热度按时间uz75evzq1#
找到了一个解决方案。最终创建了一个适配器，在从远程公开所有联邦组件之前 Package 它们。适配器基本上做以下事情：
1.创建一个div作为阴影容器并附加到父组件。
1.使用远程react版本基于挂载与更新在该div上调用react.dom render / hydrate（在这种情况下不要将react声明为单例）注意：仅当项目中只有一个react 16并且其他都是react 17+时才有效
1.注入所有的css里面的影子dom
1.设置影子dom上的mui样式的引用->如果要卸载和重新装载提供程序，则需要清除mui样式缓存
1.所有弹出框组件都需要传递一个到父组件的引用，这样就不会附加到文档根
字体是一个问题，因为如果只在shadow dom中声明，它们就不起作用。它有一个 chrome 错误。所以它们也需要在light down中加载。