Angular Primeng侧边栏是透明的

Question

我目前正在使用PrimeNg v7进行Angular 7项目。我想使用PrimeNg侧边栏模块，但我无法移除透明背景，并且阴影在打开时不会出现：What I get

我希望它就像在primeNg网站上一样：What I want

这是我的代码：appcomponent.html

<!--The content below is only a placeholder and can be replaced.-->
<p-sidebar [(visible)]="display" [baseZIndex]="10000">
    <app-sidebar></app-sidebar>
</p-sidebar>

<button type="text" (click)="display = true" pButton icon="pi pi-plus" label="Show"></button>
<router-outlet></router-outlet>

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SidebarModule,
    ButtonModule,
    NgbModule
  ],
  providers: [{provide: 'pronosticServiceType', useClass: environment.pronosticServiceType}],
  bootstrap: [AppComponent]
})
export class AppModule { }

sidebar.component.html：

<div>
  <div>
    <a href="/home">Home</a>
  </div>
  <div>
    <a href="/Pronostics">Pronostics</a>
  </div>
</div>

Answer 1

我假设您需要在项目中包含primeNg全局样式，如果您使用angular-cli，您可以在angular.json文件中将其设置为项目的styles数组：

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

如果它没有帮助请发表评论。