title: Where Do I put the MuiThemeProvider Component?
body: <p>Hi I'm currently developing a new React application using Material Ui for my choice of a css library. I'm trying to get it to play nice with react-router. I'm not sure where I'm supposed to put MuiThemeProvider. The docs example wraps the main app component around it. </p>
  
  <p>This works fine without any additional components from react-router. But when I want to render the rest of the child components from react router it throws an error. </p>
  
  <p>Index.js</p>
  
  <pre><code>  import React from "react";
    import ReactDOM from "react-dom";
    import injectTapEventPlugin from "react-tap-event-plugin";
    import routes from "./routes";
    import { Router, browserHistory} from "react-router";
    import "../public/css/index.css";
    import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
  
    injectTapEventPlugin();
  
    ReactDOM.render(
         &lt;MuiThemeProvider&gt;
            &lt;Router history={browserHistory} routes={routes} /&gt;
        &lt;/MuiThemeProvider&gt;,
         document.getElementById("root")
    );
  </code></pre>
  
  <p>and App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import NavigationBar from "./NavigationBar";
  
  class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;NavigationBar /&gt;
          {this.props.children}
        &lt;/div&gt;
       );
    }
  }   
  
  export default App;
  </code></pre>
  
  <p>The error being thrown is this</p>
  
  <blockquote>
    <p>warning.js:36Warning: React.createElement: type is invalid -- expected
    a string (for built-in components) or a class/function (for composite
    components) but got: undefined. You likely forgot to export your
    component from the file it's defined in. Check the render method of
    <code>WelcomePage</code>.</p>
  </blockquote>
  
  <p>and </p>
  
  <blockquote>
    <p>Uncaught Error: Element type is invalid: expected a string (for
    built-in components) or a class/function (for composite components)
    but got: undefined. You likely forgot to export your component from
    the file it's defined in. Check the render method of <code>WelcomePage</code>.
        at invariant (invariant.js:44)
        at instantiateReactComponent (instantiateReactComponent.js:77)
        at instantiateChild (ReactChildReconciler.js:44)
        at ReactChildReconciler.js:71
        at traverseAllChildrenImpl (traverseAllChildren.js:77)
        at traverseAllChildren (traverseAllChildren.js:172)
        at Object.instantiateChildren (ReactChildReconciler.js:70)
        at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187)
        at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)
        at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)</p>
  </blockquote>