Как добавить UI материалов в генератор сайтов gatsby

Я пытаюсь настроить комплект Gatsby и глубоко погрузиться в реакцию с этим генератором сайтов и фреймворком материалов для пользовательского интерфейса. Что я напутал? У меня ошибка

 Cannot read property 'prepareStyles' of undefined
    at RaisedButton.render

Я установил пользовательский интерфейс материалов с помощью npm

npm install material-ui

После добавления компонентов в мой пост index.js и 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;

reactjs javascript material-ui gatsby
person Palaniichuk Dmytro    schedule 30.01.2017    source источник
comment
Не могли бы вы подробнее рассказать, где вы это реализуете, или, может быть, покажете свое репо?   -  person Oleg Pro    schedule 06.02.2017
comment
FWIW Я выполнил те же шаги, но сделал это с моими компонентами компоновки Gatsby, и у меня это работает.   -  person modulitos    schedule 12.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вы забыли добавить это default theme, добавьте эти строки, он будет работать:

import getMuiTheme from 'material-ui/styles/getMuiTheme';

Затем добавьте это MuiTheme:

const MaterialUiWrapper = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
)
person Mayank Shukla    schedule 30.01.2017
comment
это не обязательно, насколько я помню. MuiThemeProvider все равно предоставит тему по умолчанию - person Oleg Pro; 06.02.2017

arrow_upward
0
arrow_downward

Это старый вопрос, но для тех, кто ищет ответ, material- ui repo теперь имеет пример. Он использует компонент более высокого порядка под названием «withRoot» для обертывания каждой страницы.

Также существует плагин gatsby material-ui, хотя в настоящее время он использует материал -ui v1-beta (не последняя на момент ответа)

person Olaolu Akinsete    schedule 03.09.2018