Fixed nested themes not being republished on outer theme changes

packages/emotion-theming/src/theme-provider.js

@@ -20,9 +20,13 @@ class ThemeProvider extends Component {
     if (this.context[channel] !== undefined) {
       this.unsubscribeToOuterId = this.context[channel].subscribe(theme => {
         this.outerTheme = theme
+        this.createBroadcast()
+        this.publish(this.props.theme)
       })
+      return
     }
-    this.broadcast = createBroadcast(this.getTheme(this.props.theme))
+
+    this.createBroadcast()
   }
 
   getChildContext() {
@@ -36,7 +40,7 @@ class ThemeProvider extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.props.theme !== nextProps.theme) {
-      this.broadcast.publish(this.getTheme(nextProps.theme))
+      this.publish(nextProps.theme)
     }
   }
 
@@ -47,6 +51,10 @@ class ThemeProvider extends Component {
     }
   }
 
+  createBroadcast() {
+    this.broadcast = createBroadcast(this.getTheme(this.props.theme))
+  }
+
   // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
   getTheme(theme) {
     if (typeof theme === 'function') {
@@ -71,6 +79,10 @@ class ThemeProvider extends Component {
     return { ...this.outerTheme, ...theme }
   }
 
+  publish(theme) {
+    this.broadcast.publish(this.getTheme(theme))
+  }
+
   render() {
     if (!this.props.children) {
       return null