MUI（Material UI）如何实现全屏宽度的移动端菜单？

核心问题排查与解决 #

• 重置全局默认边距：浏览器默认给body和html设置了margin或padding，会导致菜单无法撑满全屏。添加以下CSS：

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
  }
  

• 确保菜单元素的宽度与盒模型设置：给菜单容器设置width: 100%，同时启用box-sizing: border-box，避免内边距或边框挤压宽度：

  .mobile-menu {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem; /* 若需内边距，border-box会将其包含在宽度内 */
    position: relative;
    left: 0;
    right: 0;
  }
  

• 清除父容器的限制：检查菜单的父元素是否设置了max-width、padding或overflow，如果有，需移除或调整：

  .menu-parent {
    max-width: none;
    padding: 0;
    overflow: visible;
  }
  

• 修正固定定位偏移：如果菜单使用position: fixed，需确保左右偏移为0，用vw单位强制匹配视口宽度：

  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
  }
  

验证要点 #

• 查看元素计算样式：在浏览器开发者工具中检查菜单元素的Computed面板，确认width是否为100%，且未被父元素的边距截断。
• 处理横向溢出：若页面出现横向滚动条，给html, body添加overflow-x: hidden即可解决。

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