React, Redux, React-Router - Stuck at installing material-ui

Question

Tutorial:

However since I am using redux and react router I can not really put MuiThemeProvider to the top of the chain. What is the best way to include this library?

That is my ReactDOM.render function:

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

And that's the 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

I have done it like so. I have an index.js that is referred to by my package.json as the main file to start (with npm start). In it I have (removed some imports and such for brevity):

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

That depends on another file Root, found in my container/Root.jsx file:

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

Next up is the App, which contains my initial layout of my application (in my containers/App.jsx file):

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)

I am using the react flex grid component for layout.

So far this works for me. Hopefully it helps you out. Dont forget the injectTapEventPlugin() call, as I have it in my index.js file. I also import the .css files there for my app.