Gatsby: How to add material ui to Gatsby

Created on 30 Jan 2017 · 4Comments · Source: gatsbyjs/gatsby

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;

And add the React-Tap-Event-Plugin to listen for touch events to the root html.js

import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin();

Source

palaniichukdmytro

All 4 comments

You should enable CSS modules on material-ui CSS in node_modules directory, by default CSS modules are only enabled on files with .module in their path if I remember it right, so you should override the WebPack config,
use