Using material-ui with ecmascript6
I find material-ui and I am trying to add some components like this
import React from 'react';
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
import PropertiesList from './../components/propertylist.jsx';
import Filters from './../components/filter.jsx';
import Properties from './../models/PropertiesModel.js';
import Toolbar from './../components/toolbar.jsx';
var AppBar = mui.AppBar;
var IconButton = mui.IconButton;
var NavigationClose = mui.NavigationClose;
var ThemeManager = new mui.Styles.ThemeManager();
var FlatButton = mui.FlatButton;
injectTapEventPlugin();
class TransProperties extends React.Component {
constructor(props){
super(props);
}
render() {
return <div className="row">
<div className="col-lg-9">
<AppBar
title="Title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={<FlatButton label="Save" />} />
<PropertiesList url="/properties.json"/>
</div>
<div className="col-lg-3">
<Filters/>
</div>
</div>;
}
handleTouchTap() {
alert("oh hi");
}
}
export default TransProperties
but i get the error Uncaught TypeError: Cannot read property 'spacing' of undefined
which refers to
getStyles: function getStyles() {
var spacing = this.context.muiTheme.spacing;...}
What did I miss?
+3
source to share
1 answer
You are probably missing the contextType of your component making it accessible muiTheme
.
Your component should look something like this:
class ExampleComponent extends React.Component {
getStyles() {
...
let spacing = this.context.muiTheme.spacing;
...
}
render() {
return (
<div style={this.getStyles()} />
);
}
}
// Don't forget this little nugget
ExampleComponent.contextTypes = {
muiTheme: React.PropTypes.object
}
+3
source to share