Material Ui AppBar 与 Nprogress

Jho*_*rab 5 javascript progress-bar reactjs material-ui next.js

代码:

<AppBar color='inherit' position='fixed'><AppBar>
Run Code Online (Sandbox Code Playgroud)

我正在使用 Material-ui,当我在 Nextjs 应用程序中使用 nprogress和 Material ui 时,它不会显示在顶部。但是当AppBar颜色是透明时,就会显示 nprogress bar。现在,当页面转换开始时,我需要在 AppBar 顶部看到 nprogress (具有固定位置和继承颜色)

小智 0

根据here,AppBar的zIndex是1100,所以你可以这样做:

 <ProgressBar
            options={{showSpinner: false}}
            shallowRouting
            style={`
              #nprogress .bar {
              background: #ffffff;
              position: fixed;
              z-index: 1110 !important;
              top: 0;
              left: 0;
              width: 100%;
              height: 2px;
            }
           `}
        />
Run Code Online (Sandbox Code Playgroud)