如何在PrimeNG中更改MenuItem中的样式

Question

我正在尝试使用PrimeNG更改MenuItem的颜色。 到目前为止，这是我的代码：

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

这是我从菜单中创建itens的功能：

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

根据PrimeNG文档，我尝试添加样式标记，但它无法正常工作。尝试了所有格式和种类，尝试过类。但是没有为我工作。

有谁知道如何改变颜色？我希望第一个是绿色，第二个是黄色，第三个是红色。

Answer 1

您需要添加styleClass="menucus"

模板代码：

<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>

组件代码：

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代码：

/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;
}