Setting up theme manager: Invariant Violation: t.getChildContext(): childContextTypes must be defined in order to use getChildContext().

[kkotwal94]

I copied this example from the docs into my own component, first time using it, no idea what to do to fix the error in the title.

Childcontext types is defined tho

Is it because of the parent? Should the parent set the context?

import React from 'react';
import {Link} from 'react-router';
import UserActions from 'actions/UserActions';
import UserStore from 'stores/UserStore';
import Immutable from 'immutable';
const RaisedButton = require('material-ui/lib/raised-button');
const Dialog = require('material-ui/lib/dialog');
const ThemeManager = require('material-ui/lib/styles/theme-manager');
const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
const Colors = require('material-ui/lib/styles/colors');

export default class Profile extends React.Component {


  childContextTypes: {
    muiTheme: React.PropTypes.object
  }

    constructor(props) {
    super(props);
    this.state = UserStore.getState();
    this.state.muiTheme = ThemeManager.getMuiTheme(LightRawTheme);
  }

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme
    };
  }
  componentWillMount(){
    let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
      accent1Color: Colors.deepOrange500,
    });

    this.setState({muiTheme: newMuiTheme});
  }

  componentDidMount() {
    UserStore.listen(this._onChange);
  }

  componentWillUnmount() {
    UserStore.unlisten(this._onChange);
  }

  _onChange = () => {
    this.setState({
      user: UserStore.getState().user
    });
  }



  render() {

    let containerStyle = {
      textAlign: 'center',
      paddingTop: '200px',
    };

    let standardActions = [
      { text: 'Okay' },
    ];

    return (
      <div>
      <div className ="container-fluid">

            <div className="row">
                    <div className="col-lg-12">
                        <h1 className="page-header">
                            Profile <small>My Info</small>
                        </h1>
                        <ol className="breadcrumb">
                            <li className="active">
                                <i className="fa fa-dashboard"></i> <Link to ="/dashboard/main">Dashboard</Link>
                            </li>
                            <li>
                            Profile
                            </li>
                        </ol>
                        <div> Where my profile data should be
                         <div style={containerStyle}>
        <Dialog
          title="Super Secret Password"
          actions={standardActions}
          ref="superSecretPasswordDialog">
          1-2-3-4-5
        </Dialog>

        <h1>material-ui</h1>
        <h2>example project</h2>

        <RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />

      </div>
                        </div>
                    </div>
                </div>
          </div>

        </div>
    );
  }
}

[etburke]

I ran into this and opted to continue using React.createClass over ES6 classes. Here's a related topic on StackOverflow: http://stackoverflow.com/questions/32078493/childcontexttypes-in-es6

[shaurya947]

^that.

Or outside the class, you can access it using dot notation:

/*class definition...*/

//outside class
Profile.childContextTypes = {
    //child context keys
};

[oliviertassinari]

@etburke have a look at #1734