React Material Theme 不被外部依赖继承

Question

我们有一个共享的 npm 包，它可以自定义反应材质按钮，以便它可以被多个应用程序使用。

例如，如果我的 npm 包名是 custom-npm-package

import React from 'react'
import { Button } from '@material-ui/core';

function CustomButton(props, ref) {
   return <Button {...props} ref={ref} />;
}

export default React.forwardRef(CustomButton)

我们使用 webpack 和 @material-ui/core 作为外部依赖捆绑了这个包，并将它发布到 npm。

但是当我们尝试在主应用程序中使用它时，主题并没有传递给自定义按钮。

例如：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { CustomButton } from 'custom-npm-package';

export default createMuiTheme({
  palette: {
    primary: {
      main: '#006649',
      light: '#004930',
      dark: '#006649'
    }
  },
  typography: {
    primary: {
      main: '#006649',
      light: '#004930',
      dark: '#006649'
    }
  }
});

function App() {
  return <MuiThemeProvider theme={theme}>
    <CustomButton color='primary' />
  </MuiThemeProvider>
}

如果我这样做，我应该会看到颜色为 #006649 的按钮，但我得到的是一个带有材质默认主题颜色的按钮。

npm 包中的组件似乎没有继承自定义主题。有人可以帮助我如何实现这一目标。

Answer 1

如果您在 npm 包中安装了 @material-ui/core 作为依赖项（甚至作为 dev 依赖项），这可能会导致加载多个 @material-ui/core 副本，从而覆盖主题。

如果您将@material-ui/core 列为peer dependency仅，则它应该加载一次，并且会在您的主应用程序中从您的主题提供程序读取主题。

{
  // package.json
  "peerDependencies": {
    "@material-ui/core": "1.2.3"
  }
}