Неуместное содержимое страницы материала-UI макет с реагировать

Question

Я работаю над страницей реакции, используя Material-UI внутри электрона.На главной странице должна быть панель приложений с панелями инструментов и компонентами Drawer.

Я скопировал исходный код с https://material -ui.com / demos / drawers / для него.Все отлично работает, кроме размещения контента.Я поместил реагирующий маршрутизатор в основной тег следующим образом:

<main className={classes.content}>
    <div className={classes.appBarSpacer} />
    <Router>
    <Switch>
        <Route exact path='/' component={DeviceWithProps} />
        <Route path='/Dashboard' component={() =>
            <Dashboard />
        } />
        <Route path='/Quit' component={this._quit} />
        <Route path='/Device' component={() => DeviceWithProps} />
        <Route path='/Report' component={() => <Report />} />
        <Route path='/Settings' component={Settings} />
        <Route path='/About' component={() => <About version={currentVersion} />} />
        <Route path='/Help' component={() => <Help />} />
        <Route component={NotFound} />
    </Switch>
    </Router>
</main>

со следующими стилями:

appBarSpacer: theme.mixins.toolbar,
content: {
    flexGrow: 1,
},

Проблема в том, что контент отображается горизонтально, прямо напротив панели приложений/ Панель инструментов и я не могу понять, почему.Это выглядит следующим образом:

Чего не хватает или как я могу это исправить?

Answer 1

Решил это, адаптировав стиль.Были объявлены следующие стили:

root: {
    display: 'flex',
    flexDirection: 'column',
},
content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
    transition: theme.transitions.create('margin', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: theme.spacing.unit * 7 + 1,
    [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing.unit * 7 + 1,
    }
},
contentShift: {
    transition: theme.transitions.create('margin', {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 240,
},

И структура компонента выглядит следующим образом:

            <div className={classes.root}>
                <CssBaseline />
                <Navbar
                    drawerOpened={drawerOpened}
                    onDrawerOpened={this._handleDrawerOpen}
                    onDrawerClosed={this._handleDrawerClose}
                />
                <main className={classNames(classes.content, {[classes.contentShift]: drawerOpened, })} >
                    <Router>
                        <Switch>
                            <Route exact path='/' component={DeviceWithProps} />
                            <Route path='/Dashboard' component={() =>
                                <Dashboard />
                            } />
                            <Route path='/Quit' component={this._quit} />
                            <Route path='/Device' component={DeviceWithProps} />
                            <Route path='/Report' component={() => <Report />} />
                            <Route path='/Settings' component={Settings} />
                            <Route path='/About' component={() => <About version={currentVersion} />} />
                            <Route path='/Help' component={() => <Help />} />
                            <Route component={NotFound} />
                        </Switch>
                    </Router>
                </main> 
             </div>

FlexDirection устранила проблему горизонтального вида.Покрытие содержания было исправлено путем применения стилей для соответствующего состояния ящика.Состояние ящика передается реквизитом на панель приложений / панель инструментов / ящик, и в зависимости от состояния ящика содержимое перемещается в правильное положение.