Material UI 打开Dialog时其他组件样式发生变化问题求助

问题根因与解决方法 #

• 你遇到的导航栏margin偏移问题，90%是MUI Dialog的默认滚动锁定机制导致的：Dialog打开时默认会隐藏页面原生滚动条，同时给<body>元素添加内联的padding-right来抵消滚动条的宽度，你之前只检查了导航栏相关组件的样式，没有注意到<body>元素的样式变化才会找不到原因。
• 你提到的.MuiTouchRipple-root挂载异常，是因为你混用了两个不同大版本的MUI依赖：代码里同时存在@material-ui/core（v4版本）和@mui/material（v5版本）的导入，新旧版本的样式规则、组件内部逻辑不兼容，就会出现ripple效果挂载异常、样式错乱的问题。

调试&修复步骤 #

1. 首先验证滚动锁定的问题：打开浏览器开发者工具的元素面板，选中<body>标签，反复开关Dialog，观察<body>的style属性是否会新增padding-right和overflow: hidden规则，如果是就符合这个问题的特征。
2. 修复依赖混用问题：把所有@material-ui/开头的依赖（包括@material-ui/core、@material-ui/icons）全部替换为同版本的@mui/material、@mui/icons-material，统一使用v5版本的MUI组件，避免版本兼容问题。
3. 快速修复滚动偏移：在Dialog组件上添加disableScrollLock={true}属性，即可关闭Dialog默认的滚动锁定逻辑，不会再修改<body>的padding和overflow规则，导航栏就不会出现偏移。
4. 如果需要保留滚动锁定（即Dialog打开时背景页面不可滚动），可以给你的AppBar外层容器手动设置width: 100vw、box-sizing: border-box，抵消body的padding变化带来的偏移。

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