Merge pull request mui#4548 from oliviertassinari/fix-render-to-layer…

…-context

[RenderToLayer] Fix an internal issue with React

src/internal/RenderToLayer.js

@@ -1,6 +1,8 @@
-import {Component, PropTypes} from 'react';
+import React, {Component, PropTypes} from 'react';
 import {unstable_renderSubtreeIntoContainer, unmountComponentAtNode} from 'react-dom';
+
 import Dom from '../utils/dom';
+import MuiThemeProvider from '../styles/MuiThemeProvider';
 
 // heavily inspired by https://github.com/Khan/react-components/blob/master/js/layered-component-mixin.jsx
 class RenderToLayer extends Component {
@@ -74,6 +76,12 @@ class RenderToLayer extends Component {
     this.layer = null;
   }
 
+  /**
+   * By calling this method in componentDidMount() and
+   * componentDidUpdate(), you're effectively creating a "wormhole" that
+   * funnels React's hierarchical updates through to a DOM node on an
+   * entirely different part of the page.
+   */
   renderLayer() {
     const {
       open,
@@ -103,13 +111,14 @@ class RenderToLayer extends Component {
       }
 
       /**
-       * By calling this method in componentDidMount() and
-       * componentDidUpdate(), you're effectively creating a "wormhole" that
-       * funnels React's hierarchical updates through to a DOM node on an
-       * entirely different part of the page.
+       * We use the <MuiThemeProvider /> component as a work around for
+       * https://github.com/facebook/react/issues/6599.
        */
-
-      const layerElement = render();
+      const layerElement = (
+        <MuiThemeProvider muiTheme={this.context.muiTheme}>
+          {render()}
+        </MuiThemeProvider>
+      );
       this.layerElement = unstable_renderSubtreeIntoContainer(this, layerElement, this.layer);
     } else {
       this.unrenderLayer();

test/integration/RenderToLayer/RenderToLayer.spec.js

@@ -0,0 +1,62 @@
+/* eslint-env mocha */
+import {assert} from 'chai';
+import React, {Component, PropTypes} from 'react';
+import {mount} from 'enzyme';
+import RenderToLayer from 'src/internal/RenderToLayer';
+
+describe('<RenderToLayer />', () => {
+  it('should pass updated muiTheme context if muiTheme context changes', () => {
+    class Child extends Component {
+      static contextTypes = {
+        muiTheme: PropTypes.object.isRequired,
+      };
+
+      render() {
+        return <div>{this.context.muiTheme.foo}</div>;
+      }
+    }
+
+    class Parent extends Component {
+      static childContextTypes = {
+        muiTheme: PropTypes.object.isRequired,
+      };
+
+      state = {
+        muiTheme: {
+          zIndex: {
+            layer: 1,
+          },
+          foo: 'initial',
+        },
+      };
+
+      getChildContext() {
+        return {
+          muiTheme: this.state.muiTheme,
+        };
+      }
+
+      renderLayer = () => {
+        return <Child />;
+      };
+
+      render() {
+        return <RenderToLayer render={this.renderLayer} open={true} />;
+      }
+    }
+
+    const instance = mount(<Parent />);
+    const portal = document.body.lastChild;
+
+    assert.strictEqual(portal.firstChild.innerHTML, 'initial');
+    instance.setState({
+      muiTheme: {
+        zIndex: {
+          layer: 1,
+        },
+        foo: 'changed',
+      },
+    });
+    assert.strictEqual(portal.firstChild.innerHTML, 'changed');
+  });
+});