MUI：如何将 AppBar 定位在左侧答案

【问题标题】：MUI: how to position AppBar on leftMUI：如何将 AppBar 定位在左侧
【发布时间】：2020-08-03 23:28:13
【问题描述】：

使用 React Material UI 库（material-ui.com），如何将 AppBar 定位到屏幕左侧？我需要构建的设计在左侧有一个全局导航（您通常会在顶部看到），位置固定。导航中还有一些链接可以从左侧滑出面板（从全局导航的“后面”）。

我在支持此设计的文档中找不到任何内容。有可能吗？

谢谢

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我能够使用 flexDirection="row" 在弹性容器中使用 AppBar 来完成此操作。

 <React.Fragment>
      <CssBaseline />
      <Box display="flex" flexDirection="row" className={classes.root}>
        <Box flexGrow={0}>
          <AppBar elevation={0} position="sticky">
            <div>Left</div>
            <div>appBar</div>
            <Button>try me</Button>
            <Divider />
            <Button>try me2</Button>
          </AppBar>
        </Box>
        <Box display="flex" flexDirection="row" flexGrow={1}>
          <Box
            display="flex"
            flexDirection="column"
            className={classes.mainArea}
            flexGrow={1}
          ></Box>
        </Box>
        <Box flexGrow={0}>
          <AppBar elevation={0} position="sticky">
            <div>Right</div>
            <div>appBar</div>
            <Button>try me</Button>
            <Divider />
            <Button>try me2</Button>
          </AppBar>
        </Box>
      </Box>
    </React.Fragment>

Code SandBox Demo

【讨论】：