我在哪里放置MuiThemeProvider组件？

Question

您好我目前正在开发一个新的React应用程序，使用Material Ui来选择一个css库。我试图让它和反应路由器一起玩。我不知道我应该把MuiThemeProvider放在哪里。文档示例将围绕它的主要应用程序组件进行封装。

这工作正常，没有任何来自react-router的附加组件。但是当我想从反应路由器渲染其他子组件时，它会引发错误。

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") 
); 

和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; 

被抛出的错误是这样

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 .

和

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

我通常用MuiThemeProvider组件包装主容器的内容。

举例来说，在我的路由器我有（注意AppContainer为基础成分）：

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

而在这AppContainer我：

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