MUI ThemeProvider 未在已编译的组件中注入主题

Question

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

我使用故事书作为我的组件列表。为了看到所有内容都按预期工作，我使用 Storybook 的插件：“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. 我通过在 webpack 中创建别名解决了这个问题：

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