MUI:如何将AppBar定位在左侧

Question

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

我在文档中找不到任何支持这种设计的东西。有可能吗？

谢谢

Answer 1

我能够通过使用flexDirection="row"在flex容器中使用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