title: Changing material-ui theme on the fly --> Doesn't affect children
body: <p>I'm working on a react/redux-application where I'm using material-ui.</p>
  
  <p>I am setting the theme in my <strong>CoreLayout-component</strong> (my top layer component) using context (in accordance to the documentation). This works as expected on initial load. </p>
  
  <p>I want to be able to switch themes during runtime. When I select a new theme, my redux store gets updated and therefore triggers my components to update. The problem is that the children of my CoreLayout-component doesn't get affected - the first time! If I repeatedly change my theme (using a select-list that sends out a redux-action onChange) the children are updated. If a child component is located 2 layers down in my project hierarchy, it is updated after 2 action calls - so there is some issue with how the context is passed down. </p>
  
  <p><strong>My CoreLayout.js component</strong></p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { connect } from 'react-redux';
  import ThemeManager from 'material-ui/lib/styles/theme-manager';
  
  const mapStateToProps = (state) =&gt; ({
      uiStatus: state.uiStatus
  });
  
  export class CoreLayout extends React.Component {
      getChildContext() {
          return {
              muiTheme: ThemeManager.getMuiTheme(this.props.uiStatus.get("applicationTheme").toJS())
          };
      }
  
      render () {
          return (
              &lt;div className='page-container'&gt;
                  { this.props.children }
              &lt;/div&gt;
          );
      }
  }
  
  CoreLayout.propTypes = {
     children: PropTypes.element
  };
  
  CoreLayout.childContextTypes = {
      muiTheme: PropTypes.object
  };
  
  export default connect(mapStateToProps)(CoreLayout);
  </code></pre>
  
  <p><strong>One of my child components (LeftNavigation.js)</strong></p>
  
  <pre><code>import React from "react";
  import { connect } from 'react-redux';
  
  
  import { List, ListItem } from 'material-ui';
  
  const mapStateToProps = (state) =&gt; ({
      uiStatus: state.uiStatus
  });
  
  export class LeftNavigation extends React.Component {
      render () {
  
          return (
              &lt;div className="left-pane-navigation"&gt;
                  &lt;List subheader="My Subheader" &gt;
                      &lt;ListItem primaryText="Search" /&gt;
                      &lt;ListItem primaryText="Performance Load" /&gt;
                  &lt;/List&gt;
              &lt;/div&gt;
          );
      }
  }
  
  LeftNavigation.contextTypes = {
      muiTheme: React.PropTypes.object
  };
  
  export default connect(mapStateToProps)(LeftNavigation);
  </code></pre>
  
  <p>I can access the theme located in context by this.context.muiTheme.
  I can get the component to update the theme by using another instance of getChildContext() inside each child component, but I will have such a large number of components that I would very much like to avoid having to do that.</p>
  
  <p>My CoreLayout component's getChildContext-method is called when I change theme and all my child components gets re-rendered as expected.</p>
  
  <p>Any ideas?</p>
  
  <p>Update: It works as expected on mobile devices (at least iOS)</p>