I try to set up the Gatsby kit and deep in react with this site generator and material ui framework. What did I mess? I've got the error
Cannot read property 'prepareStyles' of undefined
at RaisedButton.render
I installed material ui with npm
npm install material-ui
After add the to components to my post index.js and 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;
You forgot to add this default theme, add this lines it will work:
import getMuiTheme from 'material-ui/styles/getMuiTheme';
Then add this MuiTheme:
const MaterialUiWrapper = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<MyAwesomeReactComponent />
</MuiThemeProvider>
)
This question is old but for anyone looking for an answer, material-ui repo now has an example . It uses an higher order component called "withRoot" to wrap each page.
There is also a gatsby material-ui plugin although it presently uses material-ui v1-beta (not the latest as at time of this answer)