Reagire, Redux, Reagire-Router - Bloccato a installazione di materiale-ui

Question

Tutorial:

Tuttavia, poiché sto usando redux e reagisco router non posso davvero mettere MuiThemeProvider al vertice della catena. Qual è il modo migliore per includere questa libreria?

Quella è la mia funzione ReactDOM.render:

ReactDOM.render(
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider>, 
    document.getElementById('root') 
); 

E questo è il router:

export default (onLogout) => (
    <Route path="/" name="app" component={App}> 
    <IndexRoute component={SimpleListComponent}/> 
    <Route path="register" component={RegisterPage}/> 
    <Route path="private" component={privateRoute(PrivatePage)}/> 
    <Route path="login" component={LoginPage}/> 
    <Route path="logout" onEnter={onLogout}/> 
    </Route> 
); 

Answer 1

ho fatto in questo modo. Ho un index.js a cui fa riferimento il mio package.json come il file principale da avviare (con npm start). In esso ho (rimosso alcune importazioni e quali per brevità):

import './stylesheets/fonts.css'; 
import './stylesheets/main.css'; 

injectTapEventPlugin(); 

// custom MuiTheme overriding the getMuiTheme() values 
const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: cyan500, 
    }, 
    appBar: { 
    color: grey300, 
    textColor: cyan500, 
    height: 50 
    }, 
}); 

const Index =() => (
    <MuiThemeProvider muiTheme={muiTheme}> 
    <Root /> 
    </MuiThemeProvider> 
) 

render(
    <Index />, 
    document.getElementById('app') 
); 

che dipende da un altro file di root, che si trova nel mio container/file di Root.jsx:

const store = configureStore(); 

// Create an enhanced history that syncs navigation events with the store 
const history = syncHistoryWithStore(browserHistory, store); 

let onUpdate =() => {window.scrollTo(0, 0); }; 

export default class Root extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <div> 
      <Router history={history} onUpdate={onUpdate}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Home}/> 
       <Route path="home" component={Home}/> 
       <Redirect path="*" to="/" /> 
      </Route> 
      </Router> 
      <DevTools/> 
     </div> 
     </Provider> 
    ); 
    } 
} 

Il prossimo è l'App , che contiene il mio layout iniziale della mia richiesta (nei miei contenitori/file di App.jsx):

export default class App extends Component { 
    constructor(props, context) { 
    super(props, context); 
    } 

    static propTypes = { 
    children: PropTypes.node 
    } 

    render() { 
    return (
     <Grid fluid> 
     <Row> 
      <Col> 
      <Header active={this.props.active} /> 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      {this.props.children} 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      <Footer/> 
      </Col> 
     </Row> 
     </Grid> 
    ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    active: ownProps.history.isActive 
    }; 
}; 

export default connect(mapStateToProps)(App) 

sto usando il reagire componente griglia di flessione per il layout.

Finora questo funziona per me. Spero che ti aiuti. Non dimenticare la chiamata injectTapEventPlugin(), come ho nel mio file index.js. Ho anche importato i file .css lì per la mia app.

Answer 2

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider> 
    </MuiThemeProvider> 
, 
    document.getElementById('root') 
);