使用React Router使用Material UI进行主题化

时间:2018-01-04 03:38:47

标签: javascript reactjs material-ui

运行此代码时,我没有在工具栏上显示蓝色。工具栏正确加载选项卡,但没有主题。它只是一种灰色和深灰色。我期待来自Material-UI @ next的光基主题

我的主要app.js文件如下所示:



const theme = createMuiTheme();

const render = (messages) => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <ConnectedRouter history={history}>
          <MuiThemeProvider theme={theme}>
            <Switch>
              <Route exact path="/" component={Splash} />
              <Route exact path="/main" component={App} />
              <Route path="/main/:navmain" component={App} />
            </Switch>
          </MuiThemeProvider>
        </ConnectedRouter>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE
  );
};
&#13;
&#13;
&#13;

然后,当我导航到/ main时,这就是我所拥有的:

&#13;
&#13;
const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  margin: 0 auto;
  display: flex;
  min-height: 100%;
  padding: 0 16px;
  flex-direction: column;
`;

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <AppWrapper>
          Below this are where the new components should render.
          <Switch>
            <Route path="/main/aboutme" component={AboutMe} />
            <Route path="/main/models" component={Models} />
            <Route path="/main/landscapes" component={Landscapes} />
          </Switch>
          <Footer />
        </AppWrapper>
      </div>
    );
  }
}
&#13;
&#13;
&#13;

出于某种原因,我很难看到我在这里做错了什么。我使用MuiThemeProvider在主switch语句中包装路由,并期望该组件内部的任何内容(如路由)从Material UI继承主题。

有人可以帮助我吗?

0 个答案:

没有答案