css - 错位的页面内容-ui布局与 react

Question

我正在使用 electron 中的 material-ui 开发一个 react 页面。主页应该有一个带有工具栏和抽屉组件的 AppBar。

我已经从https://material-ui.com/demos/drawers/复制了源代码为了它。一切正常，除了内容的放置。我以这种方式在主标签中放置了一个 react 路由器:

<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,
},

问题是内容是水平呈现的，就在 Appbar/Toolbar 旁边，我不明白为什么。它看起来像下面这样:

缺少什么或如何修复？

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 解决了水平外观的问题。通过为抽屉的相应状态应用样式来固定内容的覆盖。抽屉状态通过 Prop 传递给 Appbar/Toolbar/Drawer，并且根据抽屉状态将内容移动到正确的位置。