How to change the CSS of primeNG components in Angular?

Question

menu.component.html

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

menu.component.css

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

menu.componentts.

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'
      }
    ];
  }

}

Answer 1

You have to use ::ng-deep

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

Official documentation view Encapsulation: https://angular.io/guide/component-styles#deprecated-deep-and-ng-deep