Wo stelle ich die MuiThemeProvider-Komponente?

Question

Hallo, ich entwickle gerade eine neue React-Anwendung mit Material Ui für meine Wahl einer CSS-Bibliothek. Ich versuche es mit dem React-Router schön zu spielen. Ich bin mir nicht sicher, wo ich MuiThemeProvider platzieren soll. Im Dokumentationsbeispiel wird die Hauptanwendungskomponente umschlossen.

Dies funktioniert ohne zusätzliche Komponenten von React-Router. Aber wenn ich den Rest der Kind-Komponenten von Reagieren Router rendern will, wirft es einen Fehler.

Index.js

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(
     <MuiThemeProvider> 
      <Router history={browserHistory} routes={routes} /> 
     </MuiThemeProvider>, 
     document.getElementById("root") 
); 

und App.js

import React, { Component } from "react"; 
import NavigationBar from "./NavigationBar"; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <NavigationBar /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default App; 

der Fehler ausgelöst wird, ist dies

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 WelcomePage .

und

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 WelcomePage . 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)

Answer 1

Normalerweise wickle ich den Inhalt meines Hauptcontainers mit der MuiThemeProvider-Komponente um.

Zum Beispiel in meinem Router Ich habe (man beachte AppContainer als Basiskomponente):

<Router history={browserHistory}> 
    <Route path="/" component={AppContainer}> 
     <IndexRoute 
      getComponent={(nextState, cb) => { 
       System.import('./containers/home/home') 
        .then(loadRoute(cb)) 
        .catch(errorLoading); 
      }} 
     /> 
    </Route> 
</Router> 

Und in diesem AppContainer ich habe:

class AppContainer extends Component { 
    render() { 
     return (
      <MuiThemeProvider muiTheme={muiTheme}> 
       <div className="content"> 
        <h1>Here is my app</h1> 
        {this.props.children} 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
}