Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

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

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>
)
9 months ago · Santiago Trujillo Denunciar

0

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)

9 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos