打包一个自定义的 Material UI ThemeProvider 组件答案

【问题标题】：Packaging a customized Material UI ThemeProvider Component打包一个自定义的 Material UI ThemeProvider 组件
【发布时间】：2021-06-22 22:39:08
【问题描述】：

我正在使用 Material UI 的 createMuiTheme API 及其 ThemeProvider 组件为我的公司创建一个 Material UI 主题。当我在其中包装原生 Material UI 组件时，主题按预期工作。我正在尝试做的是创建一个单独的复合 Material UI 组件库，我公司的其他开发人员可以将其作为依赖项包含在他们的项目中，然后将他们的根应用程序包装在 MUI ThemeProvider 组件中。一个通用的可重用组件库和一个通用主题，每个都单独存储和维护。在实践中，主题在原生 Material UI 组件上按预期工作，但对使用 Material UI 构建并使用 webpack 打包的复合组件没有影响。

import React from 'react';
import {MyCompositeComponent} from '@my-mui-composite-components'
import themeSettings from './company-theme-settings';
import {
  ThemeProvider,
  StylesProvider,
  createGenerateClassName,
} from '@material-ui/core/styles';

const Root = (props) => {
  const generateClassName = createGenerateClassName({
    seed: 'my-app',
  });

  return (
    <ThemeProvider theme={themeSettings}>
      <StylesProvider generateClassName={generateClassName}>
        <MyCompositeComponent/>
      </StylesProvider>
    </ThemeProvider>
  );
};

export default Root;

加载上述根应用时，主题设置不会应用于 .我在这里尝试做的事情可能吗？有没有我想念的“正确”方法来做到这一点？

【问题讨论】：

标签： reactjs material-ui themeprovider

【解决方案1】：

当我第一次遇到这个问题时，我认为我可以通过将 @material-ui/core 外部化为我的库中的对等依赖项来解决它。当我第一次尝试这个并尝试将我的库作为依赖项导入时，webpack 抛出了一个错误，表明在我的库的 node_modules 文件夹中找不到@material-ui/core。因此，我开始质疑我认为我对对等依赖项如何工作的了解，并开始寻找替代解决方案。事实证明，对等依赖路径是正确的。问题的根源在于我在本地运行我的应用程序和库。我只需要在我的应用程序的 webpack.config 文件中包含 @material-ui/core 的别名，如下所示：

resolve: {
  alias: {
    '@material-ui/core': path.resolve('node_modules', '@material-ui/core'),
  },
},

请参阅此link 了解更多信息。

【讨论】：