javascript – 如何将材料ui添加到gatsby网站生成器

2023年2月2日 202次阅读

我尝试设置Gatsby工具包并深入反应这个网站生成器和材料ui框架.我弄乱了什么？我有错误

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

我用npm安装了材料ui

npm install material-ui

将组件添加到我的post 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;

最佳答案 您忘记添加此默认主题,添加此行将起作用：

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

然后添加这个MuiTheme：

const MaterialUiWrapper = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
)
点赞