如何在MUI中让Header内容与Container内主体内容自适应对齐？

算力阿峰

2026-6-27

解决方案

要实现Header背景全屏、内部内容与主体Container对齐的效果，核心思路是让Header的背景层（AppBar）全屏显示，同时将Header的内部内容放在和主体一致的Container组件中，这样就能自动适配不同屏幕尺寸的对齐需求。

具体实现步骤：

修改Header组件，在AppBar内部嵌套一个Container（和主体使用相同的maxWidth属性，比如xl），把Header的导航内容放在这个Container里。
保留AppBar本身的全屏背景（默认就是全屏，无需额外设置），内部内容通过Container和主体自动对齐。

代码示例：

优化后的Header组件：

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';

export default function Header() {
  return (
    <AppBar position="static">
      {/* 与主体Container使用相同的maxWidth参数 */}
      <Container maxWidth="xl">
        <Toolbar disableGutters>
          {/* 这里放置Header的具体内容，比如标题、导航按钮等 */}
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            站点标题
          </Typography>
          {/* 其他导航元素，比如按钮、菜单等 */}
        </Toolbar>
      </Container>
    </AppBar>
  );
}

保持原有结构的App组件：

import Container from '@mui/material/Container'
import Header from './pages/Header'
import './styles/app.scss'
import Body from './pages/Body'

export default function App() {
  return (
    <div className="change-background-color">
      <Header /> 
      <Container maxWidth="xl">
        <Body/>
      </Container>
    </div>
  )
}