React, Redux, React-Router - Stuck w instalowaniu rzeczowo-ui

Question

Tutorial:

Jednak odkąd używam Redux i reagują routera nie mogę naprawdę umieścić MuiThemeProvider na szczycie łańcucha. Jaki jest najlepszy sposób włączenia tej biblioteki?

To moja ReactDOM.render funkcja:

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

A to 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

Zrobiłem to tak tak. Mam plik index.js, do którego odwołuje się mój plik package.json jako główny plik do uruchomienia (przy użyciu npm start). W nim ja (usunięte niektóre importu i takie dla zwięzłość):

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

To zależy od innej plików root, znalezionych w moim zbiorniku plików/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> 
    ); 
    } 
} 

Następna w kolejce jest App , która zawiera mój początkowy układ mojej aplikacji (w moich pojemników pliku/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) 

Używam reagować Flex Component siatki dla układu.

Na razie to działa dla mnie. Mam nadzieję, że ci to pomoże. Nie zapomnij o wywołaniu injectTapEventPlugin(), ponieważ mam je w pliku index.js. Również importuję pliki .css tam dla mojej aplikacji.

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