Aditya Patel Aditya Patel - 3 months ago 42
React JSX Question

Material-UI: Code not working after updating the library

I am fairly new to material-ui and have been having trouble making my code work, once i updated from 0.14.4 to 0.15.4 .
Following is a snippet of my code:

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;


The error i am getting is


TypeError: this.context.muiTheme is undefined


I have looked into using MuithemeProvider and wrapping my code, the way its showed in documentation :

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

But i am getting a different error. Any help would be appreciated.

After discussing following is the solution

Material-ui/styles/getMuiTheme.js is transpiled from an ES2015 source, and the function is exported as a default.

Edited Code after discussion with @activatedgeek and @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

Here is a base component 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;

Now every new component you create, use the following code:

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

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

export default MyComponent;

NOTE: If you don't want to create an extra component, you need to include the getChildContext method in every component where you use Material-UI components.