如何将Material UI添加到Gatsby站点生成器中

Question

我正在尝试使用Gatsby套件和Material UI框架来深入研究React，并创建此站点生成器。我错了什么？我遇到了错误。

 Cannot read property 'prepareStyles' of undefined
    at RaisedButton.render 

我使用npm安装了Material UI

npm install material-ui

在我的帖子 index.js 和 MyAwesomeReactComponent.js 中添加这两个组件后

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const MaterialUiWrapper = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

export default MaterialUiWrapper


exports.data = {
  title: "Material UI ",
  date: "2017-12-09T12:40:32.169Z",
}

MyAwesomeReactComponent.js

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
  <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

- Palaniichuk Dmytro

---

你能否提供更多关于在哪里实现这个功能的细节，或者展示一下你的代码库？ - Oleg Pro

就我个人而言，我按照相同的步骤进行了操作，但是我是针对我的 Gatsby 布局组件进行的，现在已经可以正常工作了。 - modulitos

Answer 1

你忘记添加这个 默认主题，加上这些代码就可以了：

import getMuiTheme from 'material-ui/styles/getMuiTheme';

然后添加这个 MuiTheme:

const MaterialUiWrapper = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
)

- Mayank Shukla

---

它并不一定是我记忆中的样子。MuiThemeProvider 会提供默认主题。 - Oleg Pro

Answer 2

这个问题虽然有点老，但是对于任何正在寻找答案的人来说，material-ui repo现在有一个示例。它使用了一个名为“withRoot”的高阶组件来包装每个页面。

还有一个gatsby material-ui插件，尽管它目前使用的是material-ui v1-beta（不是最新版本，截至本回答时）。

- Olaolu Akinsete