Material UI Appbar无法随页面滚动 小屏账号图标无法访问如何解决

核心原理是将默认固定定位的AppBar在低于指定宽度阈值时改为文档流内定位，让AppBar可以跟随页面整体滚动，露出超出视口的操作元素。

方案1：MUI组件原生响应式配置 #

直接给AppBar组件的position属性传入断点配置即可，无需额外写CSS：

// 示例：宽度小于136px时改为静态定位，大于等于阈值保持固定
<AppBar
  position={{
    xs: "static",
    sm: "fixed"
  }}
>
  {/* 原有AppBar内容 */}
</AppBar>

如果需要自定义阈值为136px，可以在全局主题中修改断点配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 136, // 自定义sm断点为136px
      md: 900,
      lg: 1200,
      xl: 1536
    }
  }
});

// 应用入口用ThemeProvider包裹根组件即可生效

方案2：自定义CSS媒体查询控制 #

不想修改全局断点的话可以直接加自定义样式：

@media (max-width: 136px) {
  .MuiAppBar-root {
    position: relative !important;
  }
}

修改后宽度小于136px时AppBar会和普通页面元素一样随页面滚动，即可正常滑动到account图标位置点击。

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