如何从 PrimeNG 更改 MenuItem 中的样式

Posted 2023-03-06

【中文标题】如何从 PrimeNG 更改 MenuItem 中的样式

【英文标题】：How to change style in MenuItem from PrimeNG

【发布时间】：2018-01-24 13:36:03

【问题描述】：

我正在尝试更改 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 文档，我尝试添加样式标签，但它不起作用。尝试了所有格式和种类，也尝试了类。但不适合我。

有人知道怎么改颜色吗？我希望第一个是绿色的，第二个是黄色的，第三个是红色的。

【参考方案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;

【讨论】：

谢谢..但还没有工作...我在这里使用 .scss 文件..它抱怨 /deep/ 部分...

你试过用::ng-deep代替/deep/吗？

.scss 抱怨什么？

确保 CSS 类名正确。您可以在 chrome 中检查 css 并对其进行调试。我希望它会工作。

尝试在组件scss文件中添加css代码，而不是在主应用程序scss中添加！！