Allow components with <MuiThemeProvider /> to be passed to withStyles

I tried creating a styled component as:

    import React, {Component} from 'react';
    import ReactRotatingText from 'react-rotating-text';
    import {MuiThemeProvider, withStyles, createStyleSheet} from 'material-ui/styles';

    const styleSheet = createStyleSheet('Home', theme => ({
      // blank
    }));

    class Home extends Component {
      render() {
        return (
          <MuiThemeProvider>
            <div>
              Test
            </div>
          </MuiThemeProvider>
        );
      }
    }

    export default withStyles(styleSheet)(Home)

but I got a warning and an error in the js console:

Warning: Failed context type: You need to provide a theme to Material-UI. Wrap the root component in a `<MuiThemeProvider />`. 
Have a look at http://www.material-ui.com/#/get-started/usage for an example.
The context `styleManager` is marked as required in `withStyles(Home)`, but its value is `undefined`.
    in withStyles(Home)

Uncaught TypeError: Cannot read property 'render' of undefined
    at Style.render (eval at <anonymous> (application.js:149), <anonymous>:98:58)
    at eval (eval at <anonymous> (application.js:6343), <anonymous>:795:21)
    at measureLifeCyclePerf (eval at <anonymous> (application.js:6343), <anonymous>:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (application.js:6343), <anonymous>:794:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (application.js:6343), <anonymous>:821:32)
    at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (application.js:6343), <anonymous>:361:30)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (application.js:6343), <anonymous>:257:21)
    at Object.mountComponent (eval at <anonymous> (application.js:699), <anonymous>:45:35)
    at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (application.js:6343), <anonymous>:370:34)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (application.js:6343), <anonymous>:257:21)

After some trial and error I realized that the component I am passing into withStyles already has a <MuiThemeProvider /> tag and it is failing. To fix this I changed my component to:

    import React, {Component} from 'react';
    import ReactRotatingText from 'react-rotating-text';
    import {MuiThemeProvider, withStyles, createStyleSheet} from 'material-ui/styles';

    const styleSheet = createStyleSheet('Home', theme => ({
      // blank
    }));

    class HomeInternal extends Component {
      render() {
        return (
          <div>
            Test
          </div>
        );
      }
    }

    const StyledHome = withStyles(styleSheet)(HomeInternal);

    class Home extends Component {
      render() {
        return (
          <MuiThemeProvider>
            <StyledHome {...this.props}/>
          </MuiThemeProvider>
        );
      }
    }

    export default Home

This becomes quite cumbersome, I need to create a wrapper Component and define 2 more modules (HomeInternal and StyledHome). It would be great if I could use the withStyles function as shown in the first case. But I am not sure how hard it will be to implement, if at all 😃

Also, the error message is very misleading. Took me an hour to figure out what was going wrong. If nothing else, atleast the error message should be updated.

Thanks.

[oliviertassinari]

@slavab89 The project you are linking is addressing another issue, not related to this one. Still, we are investigation toward using it over jss-theme-reactor. We are confidant with this new solution. We will release a v1-beta version once the styling issue left are addressed.

[vedant1811]

Okay, I’ll try to find time for it and submit a PR 😃