How to change style in MenuItem from PrimeNG

Question

I'm trying to change the color of a MenuItem, using PrimeNG here. Here's my code so far:

<p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu>

And here's my function to create the itens from menu:

     this.opcoesListaCS = [
        {label: 'Approve', command: (event) => { this.approve() }},
        {label: 'Send email', command: (event) => { this.sendMail() }},
        {label: 'Details', command: (event) => { this.details() }}];

I tried to add style tag, according to PrimeNG docs, but it just doesn´t work. Tried all formats and kinds, tried also class. But non worked for me.

Does anyone know how to change the color? I'd like the first one to be green, second as yellow and third as red.

Answer 1

You need to add styleClass="menucus"

Template code:

<h3>Popup</h3>
<p-menu #menu popup="popup" styleClass="menucus" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

component code:

import { Component, OnInit } from '@angular/core';
import { MenuModule, MenuItem } from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
   items: MenuItem[];

    ngOnInit() {
        this.items = [{label: 'Approve', command: (event) => { this.approve() }},
        {label: 'Send email', command: (event) => { this.sendMail() }},
        {label: 'Details', command: (event) => { this.details() }}];
    }
    approve() {

    }
    sendMail() {

    }
    details() {

    }
}

CSS code:

/deep/ .menucus ul li:nth-child(1) {
    background: green;
}
/deep/ .menucus ul li:nth-child(2) {
    background: yellow;
}
/deep/ .menucus ul li:nth-child(3) {
    background: red;
}