How to apply custom theme in material ui
<p>I am trying to apply a custom theme to my React component after reading this tutorial</p>

<p><a href="http://www.material-ui.com/#/customization/themes" rel="noreferrer">http://www.material-ui.com/#/customization/themes</a></p>

<p>I wrote my theme in a separate javascript file like this</p>

<pre><code>import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
  spacing: Spacing,
  zIndex: zIndex,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.cyan500,
    primary2Color: Colors.cyan700,
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.pinkA200,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.deepPurpleA700,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
    pickerHeaderColor: Colors.cyan500,
  }
};
</code></pre>

<p>I apply this theme to my component in the follow way</p>

<pre><code>import React from 'react';
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import MyTheme from './theme.js';

injectTapEventPlugin();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            messages : [{id: 1, text: 'Hi'}, {id: 2, text: 'Hello'}]
        };
    }

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

    componentWillMount() {
        let newMuiTheme = this.state.muiTheme;
        this.setState({
            muiTheme: newMuiTheme,
        });     
    }

    render() {

        var messageNodes = this.state.messages.map((message) =&gt; {
            return (&lt;div key={message.id}&gt;{message.text}&lt;/div&gt;);
        });
        return (&lt;div&gt;{messageNodes}&lt;/div&gt;);
    }
}

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

export default App;
</code></pre>

<p>According to my theme when my control renders it should have a "deepPurpleA700" color .... but my control text is always black. So my theme is not applied.</p>

<p>My full code is available at <a href="https://github.com/abhitechdojo/MovieLensReact" rel="noreferrer">https://github.com/abhitechdojo/MovieLensReact</a></p>