How to change the CSS of the components of primeNG in Angular?

Navigation
0

menu.component.html 

<p-menubar class="menuPerson" [model]="items"></p-menubar>

menu.component.css 

.menuPerson{
    background-color: olivedrab;
    font-size: 14px;
}

menu.component.ts 

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/components/common/menuitem';

@Component({
  selector: 'menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  items: MenuItem[];

  constructor() { }

  ngOnInit() {
    this.items = [
      {
        label: 'Home',
        icon: 'pi pi-fw pi-home',
        routerLink: 'home'
      },

      {
        label: 'Usuario',
        icon: 'pi pi-fw pi-user',
        routerLink: 'usuario'
      },

      {
        label: 'Estados',
        routerLink: 'estados'
      }
    ];
  }

}

    
asked by anonymous 18.12.2018 / 13:43

1 answer

0

You have to use :: ng-deep 

:host /deep/ p-menubar {
    background-color: olivedrab;
    font-size: 14px;
}

Official view encapsulation documentation: link

    
18.12.2018 / 14:31
WebService Dataset FLUIG Rename a variable / class with Yeoman