如何从 PrimeNG 更改 MenuItem 中的样式

Question

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

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

这是我从菜单创建项目的功能：

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