Question

0

49

Vistas

How to add material ui to gatsby site generator

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;

9 months ago · Santiago Trujillo

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-05-25T14:16:09.895Z

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>
)

Answer 2 · 2022-05-25T14:16:09.904Z

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)