如何使用 MUI 5 创建共享组件库

Question

我有一个自定义 MUI 5 组件库 NPM 包，它导出一些使用 MUI 5 构建的基本组件，导出主题文件并将主题提供程序包装到可重用组件中，如下所示：

import { ThemeProvider } from 'styled-components';
import { StyledEngineProvider } from '@mui/material/styles';
import { theme as defaultTheme } from './theme';

function CustomThemeProvider(props: {
  theme: any;
  children: JSX.Element[];
}): JSX.Element {
  const { theme = defaultTheme, children } = props;
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </StyledEngineProvider>
  );
}

export default CustomThemeProvider;

但是，当我尝试使用此自定义主题提供程序以及使用此共享库的项目中的组件时，主题根本不应用。这种方法确实适用于 MUI 4，但当时没有情感层，设置也简单得多。

我已将所有这些添加到共享组件包的对等依赖项中，以保持引用完整。

  "peerDependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.4",
    "@mui/lab": "^5.0.0-alpha.60",
    "@mui/styles": "^5.2.3",
    "@mui/material": "^5.2.4",
    "@mui/styled-engine-sc": "^5.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.3"
  },

但这没有任何区别。

欢迎任何如何使其工作的想法，或任何其他允许共享 MUI 5 组件库/主题工作的方法！

Answer 1

不确定这是否是相同的情况，但就我而言，这是用于npm link本地开发的问题。

\n

注意：@mui如果未列为您的组件包，您也可能会遇到此问题peerDependency。

\n

TLDR：如果您的共享组件库包安装了自己的副本@mui（即/node_modules/pkg/node_modules/@mui），那么您的共享 ThemeProvider 将\xe2\x80\x99t 工作。

\n\n

我有一个非常相似的设置，有一个共享的 npm 包 ( @my/custom-components) 和 MUI 作为对等依赖项。在消费应用程序中，我使用了npm link @my/custom-components.

\n

使用链接的问题是它会创建一个指向本地包的符号链接，它不代表最终版本。发布时@my/custom-components，仅包含package.json和一个dist/文件夹。但在我的本地计算机上，它包含所有源文件，包括node_modules文件夹.

\n

通常，具有peerDependency的包不会\xe2\x80\x99有自己的子node_modules文件夹，以确保它使用主机app\xe2\x80\x99s依赖项。但通过此本地设置，@my/custom-components正在配置自己的 MUI 副本，而不是主机应用程序\xe2\x80\x99s MUI：

\n

// When using npm link\n\nhost-app\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @my/custom-components\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @mui/material-ui  <== conflicting copy\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @mui/material-ui          <== host copy\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

// When installed normally\n\nhost-app\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @my/custom-components\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @mui/material-ui          <== only copy\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

为了解决这个问题，我：

\n

\n
1. 删除了符号链接（npm install在主机应用程序中）
\n
2. 手动构建@my/custom-components( npm pack)
\n
3. 替换host-app/node_modules/@my/custom-components为构建的包。
\n

\n

Answer 2

我找到了解决办法。添加外部主题提供程序是我从 MUI4 转换过来的一个矫枉过正的行为。

在 MUI 5 中，唯一需要的是共享主题文件。因此，将主题文件放置在共享组件库中，并将其导入到使用它的项目中，但将主题提供程序保留在所有三个代码库中的本地。