如何將材料ui添加到gatsby網站生成器

Question

我嘗試設置Gatsby工具包並深入反應這個網站生成器和材料ui框架。 我弄亂了什么？ 我有錯誤

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

我用npm安裝了材料ui

npm install material-ui

將組件添加到我的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",
}

MyAwesomeReactComponent.js

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

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

export default MyAwesomeReactComponent;

Answer 1

您忘記添加此default theme ，添加此行將起作用：

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

然后添加這個MuiTheme ：

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

Answer 2

這個問題很老，但是對於任何尋找答案的人來說， 材料 - ui repo現在都有一個例子 。 它使用一個名為“withRoot”的高階組件來包裝每個頁面。

還有一個gatsby material-ui插件，雖然它目前使用的是材料-ui v1-beta（不是最新的答案時）