Reactjs 从基于MUI的自定义库导入组件时，请使用单一样式上下文

我有一个应用程序（我们称之为

frontend

）导入一个定制的React组件库（

designsystem

），它是基于材质UI的

在

frontend

应用程序中，我有一个包含ShadowDOM的组件（使用

react shadow

），我想将按钮组件从

design system

导入。我使用StylesProvider将整个树包装在ShadowDOM中，我将

jss

的自定义实例传递给了它（使用不同的注入点，因此该树中的样式不是附加在文档的头部，而是附加在ShadowDOM中）

我遇到的问题是，

frontend

使用它自己从

@material ui/styles

包中提供的样式副本（我不需要安装整个

@material ui/core

，因为所有组件都应该从

设计系统导入）而
设计系统
使用其自己的
@material ui/core
中的StylesProvider副本，导致按钮被MUI用另一个StylesProvider包装，因为它没有检测到任何可用的样式上下文（事实并非如此，因为MUI在StylesProvider.js文件的全局范围内创建了上下文-因此有两个不同的上下文可以执行相同的操作），这导致按钮可以访问默认JSS实例，其中插入点指向文档头


我想实现的是，让MUI不要为从
设计系统导入的每个组件创建另一个样式上下文，而是使用我在
前端
中定义的样式上下文，而不将其作为道具手动传递给导入的每个组件。我考虑在
@material ui/core>的顶部添加
@material ui/style
到
设计系统
，并将其添加到Web包的“外部”（因此，理论上，只会使用一个StylesProvider.js，然后使用一个上下文），但我希望有更好的解决方案。
TLDR:

只需将
@material ui/style
添加到
design system
的网页配置中的外部就足够了（即使您没有明确地将其添加为依赖项，
@material ui/core
依赖于它，并且无论如何都会使用它，所以它可以工作）

长答案：

我的设置是这样的：
design system
的package.json中的“main”入口点指向
dist/index.js
（因此，已经绑定/缩小了库的版本）。而不向“externals”添加
@material ui/style
在webpack配置中，它被捆绑在整个库中，因此在这一点上，无论我做了什么，总会有两个StylesProvider.js副本：


一种解决方案是将
@material ui/styles
标记为外部-这样，它就不会捆绑在dist/index.js中，而是在运行时可用（而且是）：


除了上述解决方案外，还有另一个解决方案——将package.json中的“main”条目改为“src/index.ts”。它使
frontend
webpack将其视为
frontend
代码的一部分，而不是单独的库：


作为奖励，最终的捆绑包更小（因为公共依赖项没有重复）。然而，这种方法的一个缺点是，每个
前端
构建也必须重建
设计系统
，这增加了总构建时间