React MUI项目中Inertia ProgressBar被AppBar遮挡无法显示如何解决

问题原因 #

你的推测是对的，问题出在层级优先级上：

• MUI的AppBar默认z-index为1100，属于页面顶层UI组件的层级范围
• Inertia ProgressBar底层依赖NProgress，默认的z-index只有1031，低于AppBar的层级，所以会被遮挡

可行解决方案 #

方案1：修改Inertia Progress初始化配置（最推荐） #

直接在app.js的InertiaProgress.init参数中增加zIndex配置，设置一个大于1100的值即可：

InertiaProgress.init({
    color: "red",
    showSpinner: true,
    // 新增z-index配置，优先级高于MUI AppBar的默认1100
    zIndex: 9999
});

这个方案无需修改其他组件代码，侵入性最低。

方案2：全局CSS覆盖NProgress默认样式 #

如果不想修改JS初始化配置，可以在全局样式文件中添加如下样式，强制提高进度条的层级：

#nprogress {
  z-index: 9999 !important;
}

要注意确保该全局样式的加载优先级足够高，不会被其他样式覆盖。

方案3：调低AppBar的z-index（不推荐） #

你也可以在自定义AppBar的样式中手动调低它的z-index，让它低于进度条的默认1031：

<AppBar 
  position="absolute" 
  open={open}
  sx={{ zIndex: 1000 }}
>

这个方案不推荐，因为MUI的组件层级是整套设计的，调低AppBar的z-index可能会导致后续其他弹窗、抽屉组件和AppBar的层级关系出现异常。

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