如何让大屏下AppBar保持全屏宽度的同时内部内容不向两侧拉伸

解决方案 #

你不需要修改AppBar本身的定位和宽度设置，只需要调整内部Toolbar的样式，让它的尺寸、边距和下方页面主内容对齐即可：
给你的<Toolbar>标签添加以下sx配置：

<Toolbar
  sx={{
    width: '100%',
    maxWidth: 'lg', // 此处取值和你页面主内容的最大宽度保持一致即可，也可填固定像素值比如1200
    mx: 'auto', // 实现水平居中
    px: 3, // 和下方main组件设置的p:3保持一致，对齐左右边距
  }}
>
  {/* 原有Toolbar内的IconButton、Tabs、退出按钮等代码保持不变 */}
</Toolbar>

逻辑说明

AppBar设置position: fixed后会脱离文档流，默认内部内容会拉伸到全屏宽度。给内部Toolbar加上最大宽度限制和居中规则后，AppBar本身还是保持全屏宽度，内部内容却能和下方正常文档流里的主内容位置完全对齐；小屏设备下maxWidth不会触发，原有适配逻辑不受影响。

内容的提问来源于stack exchange，提问作者Mitchy