Material-ui: Cannot make this library work

[olivierGM]

iI'm using es6 and I'm trying since 2 days to make this library work , i tried using the get started , search trough the issues for examples went trough repos using this library (they use older version of this ) . I get trouble with the theme manager and also i often get this type : Uncaught Error: Invariant Violation: App.getChildContext(): childContextTypes must be defined in order to use getChildContext().

It's not a precise issue because i tried a lot of differents approach and i cant figure how to make this works...
Can someone help on that , like a simple how to get started example that works ?

[odensc]

Did you ever figure this out? You have to do this under your class definition:

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

[olivierGM]

Hey Thank you , i figured it out. I am using and i had a problem implementing the get started .

I think the main problem i encountered is i was declaring childContextTypes in the class App. GetChildContext was always returning me an error where it said that childContextTypes was not defined. While i was having that problem i tried plenty of different approach who worked but kind of hazy (one where i put a props => in the render, but i didnt looked clean for me) but then i saw somewhere in the issues someone did an es6 implemetation where he was declaring childContextTypes outside the class App.

here is what i did:

import React from 'react';
import Router from 'react-router';
import {AppBar, RaisedButton, LeftNav, Styles} from 'material-ui';

let ThemeManager = new Styles.ThemeManager();
ThemeManager.setTheme(ThemeManager.types.DARK);

class App extends React.Component {

    getChildContext() {
        return {
            muiTheme: ThemeManager.getCurrentTheme()
        };
    }

    render() {

        return (
                <AppBar title='OGM rox' iconClassNameRight="muidocs-icon-navigation-expand-more"/>  
        );
    }
}

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

[RichardJECooke]

I just encounted the same problem and this fixed it. Do you know why you have to declare this single property outside the class rather than in the definition? I don't get it.

[odensc]

Because it's a static property of the class, rather than an instance property. If you're using Babel with experimental features, you can do this instead:

class Example
{
    static childContextTypes = {
        muiTheme: React.PropTypes.object
    };
}

[Download]

Thanks for your examples guys, this solved it for me.

[davidnguyen179]

After defined class. we add property childContextTypes to it. worked like charm!
Here is what I do:

//.babelrc
{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
}

class App extends React.Component {

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(MaterialTheme),
        };
    }

    render() {
        return (
            <div className="page">
                {this.props.children}
            </div>
        );
    }
}

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

export default App;

[Download]

@nndung179 If you are using babel with stage-0 features anyway, why not use the static keyword, which gives an (imho) much cleaner implementation?

export class App extends React.Component {
  static childContextTypes = {
    muiTheme: React.PropTypes.object,
  }
  // ....
}
export default App;

Especially with propTypes and defaultProps (which also need to be static) this is much nicer. Because those make up the 'public' interface of the React component so it's much nicer to have it at the top of the file i.s.o. all the way at the bottom.

BTW, I also recommend exporting your classes under their own name as well as default, for back. compat with commonJS... Otherwise you will have to require it like so:

var App = require('./app').default;  // <-- imho, ugly!!
// vs
var App = require('./app').App;

So, simply do this:

export class App { /* ... */ }
export default App;

[nahushf]

I am having the same issue. Although in my case I am using React + Typescript. Do i still need to define childContextTypes or should mentioning the return type of getChildContext() be sufficient?

[mrchief]

For some reason, static childContextTypes doesn't work for me. I'm using babel-preset-env. It works for defaultProps and props though.

When using static, React complains about missing childContextTypes. Using App.childContextTypes = seems to work.