React Material Theme 不被外部依赖继承

Posted 2023-02-22

【中文标题】React Material Theme 不被外部依赖继承

【英文标题】：React Material Theme is not inherited by external dependency

【发布时间】：2021-05-20 12:45:24

【问题描述】：

我们有一个共享的 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 包中的组件似乎没有继承自定义主题。有人可以帮助我如何实现这一目标。

【参考方案1】：

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

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

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

【讨论】：

我仅添加为对等依赖项。但看起来它不起作用。