Javascript 材料界面&x2013；组件的单个或多个“MuiThemeProvider”

我有一个场景，我的项目被分成两个存储库，

{WEBSITE}

和

{COMPONENTS}

{WEBSITE}

处理业务逻辑和数据获取，它还导入

{COMPONENTS}

为它们提供获取的数据

{COMPONENTS}

处理UI主题：颜色、字体、全局变量。。它们是纯粹的表现成分

MUI使用的典型场景是将

包装在

或

周围

然而，在我的情况下，

{WEBSITE}

没有安装

材质ui

，因此无法访问

MuiThemeProvider

，除非从

{COMPONENTS}/materialUI

显式导出（这听起来像是反模式）

因此，为了对

{COMPONENTS}

中找到的每个MUI组件进行样式化，我发现自己必须使用

MuiThemeProvider

导出它们中的每个组件，如下所示：

<MuiThemeProvider muiTheme={sharedThemeBetweenComponents}>
  <Header>
    <AppBar />
  </Header>
</MuiThemeProvider>

---

---

是否建议使用

MuiThemeProvider

导出每个组件？如果我的

{WEBSITE}

页面上有数百个组件，这将如何影响全局性能？

MuiThemeProvider真正做的就是将getChildContext（）添加到组件中，以便将context.muiTheme传递给它的子组件。它应该一点也不贵（尽管不要费心在没有MUI子级的组件上添加它）。也不是完全可以避免的。唯一的解决方法是自己在组件上提供方法，但这只会增加您自己的代码，而不会获得任何东西。为什么不在网站repo中安装materialui，并使其成为组件repo的对等依赖项？

<MuiThemeProvider muiTheme={sharedThemeBetweenComponents}>
  <Card />
</MuiThemeProvider>