Intento configurar el kit de Gatsby y reaccionar profundamente con este generador de sitios y el marco de interfaz de usuario de material. ¿Qué arruiné? tengo el error
Cannot read property 'prepareStyles' of undefined at RaisedButton.renderInstalé material ui con npm
npm install material-uiDespués de agregar los componentes a mi publicación index.js y 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;Olvidó agregar este default theme , agregue estas líneas y funcionará:
import getMuiTheme from 'material-ui/styles/getMuiTheme'; Luego agregue este MuiTheme :
const MaterialUiWrapper = () => ( <MuiThemeProvider muiTheme={getMuiTheme()}> <MyAwesomeReactComponent /> </MuiThemeProvider> )Esta pregunta es antigua, pero para cualquiera que busque una respuesta, material-ui repo ahora tiene un ejemplo . Utiliza un componente de orden superior llamado "withRoot" para envolver cada página.
También hay un complemento gatsby material-ui , aunque actualmente usa material-ui v1-beta (no es el último en el momento de esta respuesta)