React Material Theme不被外部依赖所继承

Question

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

例如，如果我的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。

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

例如:

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

如果你把@material-ui/core作为一个依赖项安装在你的npm包中(甚至作为dev依赖项)，这可能会导致@material-ui/core的多个副本被加载，这可能会覆盖主题。

如果您将@material-ui/core列为对等依赖仅它应该被加载一次，它将从你的主应用程序的主题提供程序中读取主题。

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