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",
  //...
],

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

Angular Primeng侧边栏是透明的

Angular Primeng sidebar is transparent

sidebar

primeng

angular