Css 如何从素描更改菜单项中的样式

我试图改变菜单项的颜色，在这里使用素描。 以下是我目前的代码：

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

据PrimeNG docs称，我试图添加样式标签，但它就是不起作用。尝试了所有的格式和种类，也尝试了类。但我没有工作

---

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

您需要添加

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>

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

CSS代码：

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

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

---

谢谢……但还没开始工作。。。我在这里使用的是.scss文件。它抱怨/deep/part…您是否尝试过使用

：：ng deep

而不是

/deep/

？什么.scss抱怨？确保CSS类名正确。您可以在chrome中检查css并调试它。我希望它能工作。尝试在组件scss文件中添加css代码，而不是在主应用程序scss中添加！！