"Get Started" docs should mention that you _must_ add `getChildContext` in order to avoid `muiTheme is undefined` error

[romankolpak]

I was surpriseed to discover that just installing the package and requiring the components is not enough to get you started.

Adding this to the main component does the trick

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

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

Seems weird that docs don't mention this on the "Get Started" page.

A number of issues seem to be related to this, see #686, #687

[MrOrz]

Don't forget to mention where we can get ThemeManager:

var ThemeManager = require('material-ui/lib/styles/theme-manager')();

[Update] The require syntax can be more concise no matter ES5 or ES6 is used. Please refer to: https://github.com/callemall/material-ui/issues/689#issuecomment-138692240

[mewben]

Do we have to put those codes every time we use a component? Is there a way to eliminate those just like in pre v.0.8.0 version?

[xizhao]

Yes please -- I do not want to be forced on a theme manager.

[hackeryarn]

This is actually mentioned on the Themes page. However, I do agree that this should be move to the getting started page.

[bigomega]

Just saw that... very subtle my friend

[chellberg]

This may be unique to Marty and/or ES6 inheritance, but I got InvariantViolation errors until I defined childContextTypes outside the class, following the Themes page example:

class OuterMostParentComponent extends React.Component {
  // Important!
  getChildContext() { 
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  }
};

// Important!
OuterMostParentComponent.childContextTypes = {
  muiTheme: React.PropTypes.object
};

[gsklee]

+1, was really surprised since I thought this is a mature enough project.

[levbrie]

@MrOrz Just to clarify the situation with getting the ThemeManager (which, as mentioned, you can currently find on the themes), you don't actually have to require the full path. In ES6/ES2015 syntax, you can use:

import * as mui from 'material-ui';
let ThemeManager = new mui.Styles.ThemeManager();

or in ES5:

var mui = require('material-ui');
var ThemeManager = new mui.Styles.ThemeManager();

[MrOrz]

@levbrie :+1: I'll update my comment!

[TCMiranda]

I just want to share a related issue, which held me some time...

So... React.cloneElement breaks the context while on 0.13

If so, react will warn you that owner-based and parent-based contexts differ.

https://github.com/facebook/react/issues/4008

[jason-henriksen]

Could something be added to the webpack example to explictly show what your'e supposed to do? I've literally spent 2 days trying to make the theme context thing work. There is a number of comments stating "You must put this or that somethere" but none of it shows in the example code. I try to just render a button under react-slingshot and am getting nothing but frustration.

I don't want to abandon material-ui when it's clear I'm the one doing something wrong, but I literally have no idea what I'm supposed to do regarding the theme stuff. All I know is that it's constantly undefined when I try to use it anywhere outside of the webpack example. The "works here but not anywhere else" situation is really getting me down.

[colemannerd]

This really needs to be in the documents even more than it is now. I do not understand how to use this themepack with es6 and ReactRouter. I'm about to abandon MaterialUI because of the poor documentation and release notes.

[mbrookes]

I'm about to abandon MaterialUI because of the poor documentation and release notes.

No worries, we guarantee full refunds. 😄

OTOH, if would like to contribute more positively, this may be the file to start with:

https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/get-started/usage.md

[jason-henriksen]

For what it's worth, once I got the tags in the right place, it's been working great for me. I'm also making efforts to improve the error messages and documentation, but it's not ready to submit yet.

[colemannerd]

@mbrookes I'd be happy to help write functional release notes before the next release. I was being grumpy because I still do not understand the feature enough to add the right way to do it. I don't understand why MuiTheme was made a required object and without knowing this, i can't at all contribute the proper way to use it.

[mbrookes]

@colemannerd It shouldn't be:

https://github.com/callemall/material-ui/pull/4229

[Meesam]

i use let ThemeManager = new mui.Styles.ThemeManager();

but on browser it shows Cannot read property 'ThemeManager' of undefined

[vnallamhawk]

you shouldn't enforce to use these lines of code " muiTheme: React.PropTypes.object },

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

as none would actually want to add these in their project. Please close this package for the public.

[mbrookes]

Locking due to random comments on an out-of date issue. Not least, the theme solution has changed on v0 since this issue was closed.