PrimeNG 菜单栏 Angular 样式

Question

我正在使用 primeng 4.3.0 和 Angular 4 开发一个项目，我正在为我的其他页面创建一个水平菜单。我无法更改这些的版本，所以这是问题：

我正在使用菜单栏并尝试使用 ng-deep 更改它的颜色（因为没有其他方法可以更改它）。我读到要访问子菜单的颜色是创建一个新的 class 并调用 ul li:nth-child 并且每个子菜单都有一个数字，因此您可以更改它。问题是：

1) 对于第一个子菜单，我只创建了两个项目，对于第二个子菜单 5。当我调用 ul li:nth-child(3) 时，它在第一个子菜单上创建了一个新行，如图所示.

2）第一个和第二个子菜单顶部有一条白色边框线，我无法摆脱它。

我是做错了什么还是一个错误？这是代码和图像：

模板：

<section>
  <div id="menu-box2">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p-menubar #menu [model]="items" styleClass="menucus">
          </p-menubar>
        </div>
      </div>
    </div>
  </div>
</section>

TS:

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';

@Component({
  selector: 'app-report-base-page',
  templateUrl: './report-base-page.component.html',
  styleUrls: ['./report-base-page.component.scss']
})
export class ReportBasePageComponent implements OnInit {
  private items: MenuItem[];
  constructor() { }

  ngOnInit() {
    this.items = [
      {
        label: 'Riconciliazioni',
        items: [
          {
            label: 'Nexi',
            routerLink: ['/report/nexi'],
            routerLinkActiveOptions: {
              exact: true
            }
          },
          {
            label: 'Tico',
            routerLink: ['/report/quisque'],
            routerLinkActiveOptions: {
              exact: true
            }
          }
        ]
      },
      {
        label: 'Fatturazione Tico',
        routerLink: ['/report/fat_quisque'],
        routerLinkActiveOptions: {
          exact: true
        }
      },
      {
        label: 'Partners fee',
        routerLink: ['/report/partnersfee'],
        routerLinkActiveOptions: {
          exact: true
        }
      },
      {
        label: 'SAP',
        items: [
          {
            label: 'Incasso',
            routerLink: ['/report/sap_incasso'],
            routerLinkActiveOptions: {
              exact: true
            }
          },
          {
            label: 'Transato',
            routerLink: ['/report/sap_transato'],
            routerLinkActiveOptions: {
              exact: true
            }
          },
          {
            label: 'Fee',
            routerLink: ['/report/sap_fee'],
            routerLinkActiveOptions: {
              exact: true
            }
          },
          {
            label: 'Ordini pagamento',
            routerLink: ['/report/sap_odp'],
            routerLinkActiveOptions: {
              exact: true
            }
          },
          {
            label: 'Esiti Pagamento',
            routerLink: ['/report/sap_edp'],
            routerLinkActiveOptions: {
              exact: true
            }
          },
        ]
      },
      {
        label: 'Flusso incassi',
        routerLink: ['/report/flussoInc'],
        routerLinkActiveOptions: {
          exact: true
        }
      },
      {
        label: 'Report Alfa Evolution',
        routerLink: ['/report/reportAlfa'],
        routerLinkActiveOptions: {
          exact: true
        }
      },
    ];
  }
}

SCSS:



::ng-deep .menucus ul li:nth-child(1) {
    background: #5393bc;
}
::ng-deep .menucus ul li:nth-child(2) {
    background: #5393bc;
}
::ng-deep .menucus ul li:nth-child(3) {
    background: #5393bc;
}
::ng-deep .menucus ul li:nth-child(4) {
    background: #5393bc;
}
::ng-deep .menucus ul li:nth-child(5) {
    background: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color: #5393bc;
}
::ng-deep .ui-menu,.ui-menu .ui-menu-child{
    border: 0px;
    background:#5393bc 0 0 repeat-x !important;
}
::ng-deep .ui-menu .ui-menuitem .ui-state-active{
    background-color: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
.ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color:#186ba0;
}

这是图片

https://i.imgur.com/UCTNpmW.png

Answer 1

我找到了解决方案。我必须创建一个新的 class 并使用 styleClass 将它绑定到每个项目。变化：技术人员：

{
        label: 'Riconciliazioni',
        items: [
          {
            label: 'Nexi',
            routerLink: ['/report/nexi'],
            routerLinkActiveOptions: {
              exact: true
            },
            styleClass: 'menucus'
          },
          {
            label: 'Tico',
            routerLink: ['/report/quisque'],
            routerLinkActiveOptions: {
              exact: true
            },
            styleClass: 'menucus'
          }
        ]
      }

SCSS:

::ng-deep .ui-menu,.ui-menu .ui-menu-child{
    border: 0px;
    background:#5393bc 0 0 repeat-x !important;
}
::ng-deep .ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem .ui-state-active{
    background-color: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
.ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color:#186ba0;
}
::ng-deep .menucus{
    background: #5393bc !important;
}

样式类已添加到 TS 上的每个项目。

PrimeNG 菜单栏 Angular 样式

PrimeNG Menubar Angular Styling

html

sass

typescript

primeng

angular