如何使 Appbar 内容不会在较大显示屏上拉伸到两侧

Question

我想将我的Appbar内容居中，这样在较大的显示器上时它就不会散布到屏幕的两侧。有一些图片展示了它的外观和我想要的外观。

问题是，在较小的屏幕上，页面Appbar内容和页面内容都适合屏幕，但在较大的显示器上，Appbar内容继续扩散，而页面内容保持居中。因此，我希望Appbar保持全角，而其内容与页面内容保持在同一位置 - 正如您在第二个屏幕中看到的那样。

我的页面代码：

<Box sx={{ display: "flex" }}>
  <CssBaseline />
  <AppBar
    position="fixed"
    sx={{
      marginTop: "10px",
      width: `100%`,
    }}
  >
    <Toolbar>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        edge="start"
        sx={{ mr: 2, display: { sm: "none" } }}
      >
        <MenuIcon />
      </IconButton>
      <Box
        sx={{
          borderBottom: 1,
          borderColor: "divider",
          mr: 2,
          display: { xs: "none", sm: "block", md: "block" },
        }}
      >
        <Tabs
          aria-label="basic tabs example"
          TabIndicatorProps={{
            style: {
              background: "#ffffff",
            },
          }}
        >
         // MY TABS 
        </Tabs>
      </Box>
      <div className={classes.alignRight}>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="right"
        >
          <LogoutRoundedIcon />
        </IconButton>
      </div>
    </Toolbar>
  </AppBar>
  <Box
    component="nav"
    sx={{ width: { sm: 0 }, flexShrink: { sm: 0 } }}
    aria-label="mailbox folders"
  >
  </Box>
  {/* Page content */}
  <Box
    component="main"
    sx={{
      flexGrow: 1,
      p: 3,
    }}
  >
    // MY CONTENT
  </Box>
</Box>

更改Appbar位置标签以将position="static"其更改为所需的宽度，但我只想要该宽度的内容。

Answer 1

<AppBar position="static">
  <Toolbar
    sx={{
      width: "100%",
      maxWidth: 600,
      mx: "auto"
    }}
  >

• 设置amaxWidth限制大屏宽度
• 设置width为100%可在上述限制内扩展内容宽度maxWidth。
• margin将left 和 right设置为auto使其自身Toolbar在Appbar

现场演示