Material-UI：更新库后代码不起作用

Question

我对 material-ui 相当陌生，并且在我从 0.14.4 更新到 0.15.4 后，我的代码工作一直有问题。 以下是我的代码的 sn-p：

var React = require('react'),
  mui = require('material-ui'),
  LoginDialog = require('./login-dialog.jsx'),
  RaisedButton = mui.RaisedButton,
  MuiThemeProvider = require('material-ui/styles/MuiThemeProvider');



var Index = React.createClass({


  //childContextTypes: {
  //  muiTheme: React.PropTypes.object
  //},
  //
  //getChildContext: function() {
  //  return {
  //    muiTheme: ThemeManager.getCurrentTheme()
  //  };
  //},

  render: function() {
    return (
      <div className="mui-app-canvas home-page-background">
        <RaisedButton
          className="login-button"
          label="Login"
          onTouchTap={ this._handleLoginDialog }
          linkButton={ false } />
        <LoginDialog
          ref="loginDialog"
          loginUrl={ this.props.loginUrl } />
      </div>
    )
  },

  _handleLoginDialog: function() {
    this.refs.loginDialog.show();
  }
});

module.exports = Index;

我得到的错误是

TypeError: this.context.muiTheme 未定义

我已经研究过使用 MuithemeProvider 并包装我的代码，就像它在文档中显示的那样：

http://www.material-ui.com/#/get-started/usage

但是我得到了一个不同的错误。任何帮助，将不胜感激。

讨论后解决办法如下

Material-ui/styles/getMuiTheme.js 是从 ES2015 源代码编译而来，函数默认导出。

与@activatedgeek 和@robertkelp 讨论后编辑的代码

---

var React = require('react'),
  mui = require('material-ui'),
  LoginDialog = require('./login-dialog.jsx'),
  RaisedButton = mui.RaisedButton,
  MuiThemeProvider = require('material-ui/styles/MuiThemeProvider'),
  getMuiTheme = require('material-ui/styles/getMuiTheme').default,
  darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme');



var Index = React.createClass({
  getChildContext: function() {
    return {
      muiTheme: getMuiTheme(darkBaseTheme)
    };
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  render: function() {
    return (
      <div className="mui-app-canvas home-page-background">
        <RaisedButton
          className="login-button"
          label="Login"
          onTouchTap={ this._handleLoginDialog }
          linkButton={ false } />
        <LoginDialog
          ref="loginDialog"
          loginUrl={ this.props.loginUrl } />
      </div>
    )
  },

  _handleLoginDialog: function() {
    this.refs.loginDialog.show();
  }
});

module.exports = Index;

Answer 1

这是一个基础组件BaseMUI.jsx

import React from 'react';

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

/**
 * Basic theme bookkeeping for Material UI
 */
class BaseMUI extends React.Component {
  getChildContext() {
    return {
      muiTheme: getMuiTheme(darkBaseTheme)
    };
  }
}

BaseMUI.childContextTypes = {
  muiTheme: React.PropTypes.object
};

export default BaseMUI;

现在您创建的每个新组件，使用以下代码：

import React from 'react';
import BaseMUI from './BaseMUI';

class MyComponent extends BaseMUI {
  // you component code here
}

export default MyComponent;

注意：如果您不想创建额外的组件，则需要在使用Material-UI 组件的每个组件中包含getChildContext 方法。