【问题标题】:How to change style in MenuItem from PrimeNG如何从 PrimeNG 更改 MenuItem 中的样式
【发布时间】: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 文档,我尝试添加样式标签,但它不起作用。尝试了所有格式和种类,也尝试了类。但不适合我。

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

【问题讨论】:

    标签: css angular 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中添加!!
    猜你喜欢
    • 1970-01-01
    • 2018-05-29
    • 2018-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-19
    • 2021-12-06
    • 2018-08-03
    相关资源
    最近更新 更多