reactjs - MUI ThemeProvider 未在已编译组件中注入(inject)主题

Question

所以我有这两个使用 MUI 的项目。其中一个只包含小的功能组件(一个库)，另一个通过 yarn link 导入组件的“库”，并且应该通过“ThemeProvider”应用自定义主题。

我使用故事书作为我的组件列表。为了看到所有工作都按预期进行，我使用了故事书的插件:'storybook-addon-material-ui'。

我如何定义故事的示例代码:

storiesOf('Tile', module)
  .addDecorator(muiTheme([myCustomTheme]))
  .add('Default', withInfo()(() => (
    <div>
      <Tile title="Title goes here" />
    </div>
  )))

Storybook 显示了我想要的确切结果。我的自定义主题也从图书馆项目中导出。当我在我的工作项目(导入库的项目)中使用它时，我通过 定义了主题 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'; 在第一个可能的包装组件中:

class Layout extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
         // Provider, Routing, etc
      </MuiThemeProvider>
    )
  }

}

结果:我的工作项目中的每个 MUI 组件，除了我的库组件之外，都在我的自定义主题中设置了样式。但是，我的自定义组件在核心中的基本 MUI 主题中设置了样式。

当我使用已经用脚本构建的组件时:

BABEL_ENV=production babel src -d lib --ignore src/**/*.story.jsx,src/**/*.spec.js,src/**/*.test.js

我是否遗漏了一些我需要给我的自定义组件的设置，以便它们使用我的 MUI 提供的主题？

Answer 1

所以这与在这个非常常见的问题中观察到的不良行为相同:https://github.com/facebook/react/issues/13991 .在我的例子中，由于 yarn link，我有两个 Material UI 实例。我通过在我的 webpack 中创建别名解决了这个问题:

config.resolve = {
  ...config.resolve,
  alias: {
    react: path.resolve("./node_modules/react"),
    '@material-ui': path.resolve("./node_modules/@material-ui")
  }
};