从基于 MUI 的自定义库导入组件时使用单个 StylesContext

Question

我有一个应用程序（我们称之为frontend ）导入基于 Material UI 的自定义 React 组件库（ design-system ）。

在frontend应用程序中，我有一个包含 ShadowDOM 的组件（使用react-shadow ），我想将 Button 组件从design-system导入到该组件。 我使用 StylesProvider 将整个树包裹在 ShadowDOM 中，我将自定义的jss实例传递给（使用不同的 injectionPoint，因此该树内部的 styles 不是附加在文档的开头，而是附加在 ShadowDOM 内部。

我遇到的问题是， frontend使用来自@material-ui/styles package 的自己的 StylesProvider 副本（我不需要安装整个@material-ui/core ，因为所有组件都应该从design-system导入）和design-system使用自己的来自@material-ui/core的 StylesProvider 副本，从而导致 Button 被 MUI 与另一个 StylesProvider 包装，因为它没有检测到任何可用的 styles 上下文（它没有，因为 MUI 在 StylesProvider.js 文件的全局 scope 中创建上下文 - 所以有两个不同的上下文执行相同的操作），导致 Button 可以访问 insertPoint 指向文档头的默认 JSS 实例。

我想要实现的是，让 MUI 不为从design-system导入的每个组件创建另一个 styles 上下文，而是使用我在frontend定义的那个 - 而不将其作为道具手动传递给每个导入的组件。 我考虑在@material-ui/core之上添加@material-ui/styles到design-system并将其添加到 webpack 的“外部”（因此，理论上，只会使用一个 StylesProvider.js，而反过来 - 一个上下文） ，但我希望有更好的解决方案。

Answer 1

TLDR：

只需将@material-ui/styles添加到design-system的 webpack 配置中的 externals 就足够了（即使您没有将它显式添加为依赖项， @material-ui/core也依赖它并且无论如何都会使用它，所以它作品）。

长答案：

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

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

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

作为奖励，最终的捆绑包更小（因为没有重复常见的依赖项）。 然而，这种方法的一个缺点是，每个frontend构建还必须重新构建design-system ，这增加了总构建时间。