Question

我正在使用电子内的材料-ui在反应页面上工作。主页应具有一个带有工具栏和抽屉组件的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之外，内容还是水平呈现的，我无法弄清楚原因。看起来如下：

缺少什么或如何解决？

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

页面内容与UI布局错位并带有react

1 个答案: