时间戳

首页 > 解决方案 > 错位的页面内容 - 带有反应的 UI 布局

css - 错位的页面内容 - 带有反应的 UI 布局

问题描述

我正在使用电子中的 material-ui 处理反应页面。主页应该有一个带有 Toolbar 和 Drawer 组件的 AppBar。

我已经从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,
},

问题是内容是水平呈现的，就在 Appbar/Toolbar 旁边，我不知道为什么。它如下所示：

页面内容呈现在错误的位置

缺少什么或如何解决？

标签： cssreactjsreact-routerelectronmaterial-ui

解决方案

通过调整样式解决了它。已声明以下样式：

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

推荐阅读