4

我尝试设置 Gatsby 工具包，并与这个站点生成器和材料 ui 框架进行深入反应。我搞砸了什么？我有错误

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

我用 npm 安装了材料 ui

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;
4

2 回答 2

1

你忘了添加这个default theme，添加这行它会起作用：

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

然后添加MuiTheme：

const MaterialUiWrapper = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
)
于 2017-01-30T14:19:32.170 回答
0

这个问题很老，但对于任何寻找答案的人来说，material-ui repo 现在有一个例子。它使用称为“withRoot”的高阶组件来包装每个页面。

还有一个gatsby material-ui 插件，尽管它目前使用 material-ui v1-beta （不是这个答案时的最新版本）

于 2018-09-03T07:32:30.927 回答