封装自定义的 Material UI ThemeProvider 组件

如何解决封装自定义的 Material UI ThemeProvider 组件

我正在使用 Material UI 的 createMuiTheme API 及其 ThemeProvider 组件为我的公司创建一个 Material UI 主题。当我在其中包装原生 Material UI 组件时，该主题按预期工作。不过，我想要做的是创建一个单独的复合材料 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;

当上面的根应用加载时，主题设置不会应用于 .我在这里尝试做的事情可能吗？有没有一种“正确”的方法可以做到这一点，而我却错过了？

解决方法

当我第一次遇到这个问题时，我认为我可以通过将@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。