Using material-ui with ecmascript6

Question

I jus find material-ui and I'm trying to add some components in the following way

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 an error Uncaught TypeError: Cannot read property 'spacing' of undefined

which refers to

 getStyles: function getStyles() {
    var spacing = this.context.muiTheme.spacing;...}

What did I missed?

Ashley 'CptLemming' Wilson · Accepted Answer · 2015-07-20 18:45:00Z

3

You're likely missing the contextType on your component, which makes muiTheme available.

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
}

answered Jul 20, 2015 at 18:45

Ashley 'CptLemming' Wilson

9,6122 gold badges35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fefe Over a year ago

Thanks for feedback yeah it seems like this would be the way to do but I get Unexpected token

Ashley 'CptLemming' Wilson Over a year ago

Can you post the component you're having trouble with? Maybe there's something else causing the Unexpected token issue?

fefe Over a year ago

I have it the link what you provide me helped a lot thanks!

Collectives™ on Stack Overflow

Using material-ui with ecmascript6

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related