Javascript 如何向gatsby站点生成器添加材质ui

我试着设置盖茨比工具包，并深入使用这个站点生成器和材料ui框架。我搞砸了什么？我发现了错误

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

我用npm安装了物料界面

npm install material-ui

将to组件添加到my post 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",
}

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

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

export default MyAwesomeReactComponent;

从“React”导入React；
从“react dom”导入react dom；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“./MyAwesomeReactComponent”导入MyAwesomeReactComponent；
const MaterialUiWrapper=（）=>(
);
导出默认材质rapper
exports.data={
标题：“材料界面”，
日期：“2017-12-09T12:40:32.169Z”，
}

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",
}

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

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

export default MyAwesomeReactComponent;

从“React”导入React；
从“物料界面/RaisedButton”导入RaisedButton；
常量MyAwesomeReactComponent=（）=>(
);
导出默认MyAwesomeReactComponent；

您忘记添加此

默认主题，添加以下行即可：

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

然后添加此
MuiTheme
：

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

const MaterialUiWrapper=（）=>(
)
这个问题很老了，但对于任何想寻求答案的人来说。它使用一个名为“withRoot”的高阶组件来包装每个页面

还有一个问题，尽管它目前使用的是material ui v1 beta版（不是本次回答时的最新版本）
我记得不一定如此。MuiThemeProvider将提供默认主题。您能否提供更多详细信息，说明您在何处实现此功能，或者可能显示您的repo？FWIW我遵循了相同的步骤，但我对我的Gatsby布局组件进行了此操作，它对我有效。