如何让Material UI移动端菜单从屏幕最左侧开始显示？

以下几种方法可尝试解决Menu无法紧贴屏幕左边缘的问题：

• 覆盖Popper默认偏移：
  Material UI的Menu基于Popper组件实现，默认会给弹出元素添加偏移量。通过PopperProps修改偏移参数，强制取消左右偏移：

  <Menu
    // 保留原有其他props
    PopperProps={{
      modifiers: [
        {
          name: 'offset',
          options: { offset: [0, 0] } // 将x、y方向偏移设为0
        }
      ]
    }}
  >
    {/* Menu内容 */}
  </Menu>
  

• 用sx强制覆盖Paper样式：
  替换原style为Material UI优先级更高的sx方案，同时清除内边距并强制定位：

  <Menu
    // 保留原有其他props
    PaperProps={{
      sx: {
        width: '80vw',
        height: '100vh',
        margin: 0,
        paddingLeft: 0,
        left: 0,
        top: 90
      },
    }}
  >
    {/* Menu内容 */}
  </Menu>
  

• 调整anchor属性搭配：
  使用anchorReference="anchorPosition"时，移除可能冲突的anchorOrigin属性，确保anchorPosition与transformOrigin匹配：

  <Menu
    anchorReference="anchorPosition"
    anchorPosition={{ top: 90, left: 0 }}
    transformOrigin={{ vertical: 'top', horizontal: 'left' }}
    // 移除anchorOrigin属性
    // 保留原有其他props
  >
    {/* Menu内容 */}
  </Menu>
  

• 自定义CSS类全局覆盖：
  若以上方法无效，直接通过自定义类修改根元素和Paper样式：

  .menu-style {
    left: 0 !important;
    margin-left: 0 !important;
  }
  .menu-style .MuiPaper-root {
    margin-left: 0 !important;
    padding-left: 0 !important;
    left: 0 !important;
  }
  

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