從基於 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 ，這增加了總構建時間。