更改primeng PanelMenu 样式

Posted 2023-03-06

【中文标题】更改primeng PanelMenu 样式

【英文标题】：change primeng PanelMenu styles

【发布时间】：2018-09-04 17:47:17

【问题描述】：

我正在尝试更改 PanelMenu 组件的样式

我更改了全局背景颜色。

我会将主菜单颜色更改为白色并将子菜单保持为黑色

同时关注一个元素将颜色从蓝色更改为另一种颜色

<p-panelMenu [model]="items" [style]="'width':'100%'" [multiple]=false></p-panelMenu>

CSS

::ng-deep .ui-panelmenu .ui-widget 
    background-color: #5F5F5F !important;
    font-family: 'BNPPSans'

::ng-deep .ui-menuitem-text 
    font-family: 'BNPPSans';
;

我已经绑定了许多引用 documentation 的组合，但没有人在工作 在开发工具中我可以在这里更改它

但是通过将其复制到 css 并没有进行任何更改

::ng-deep .ui-panelmenu .ui-panelmenu-header.ui-state-active, .ui-panelmenu .ui-panelmenu-header.ui-state-active a
    background-color: red !important;
;

这是stacklitz（我不知道为什么项目重叠）

【问题讨论】：

你能创建一个 Plunker 吗？

我添加了一个 plunkr

您是否在 PrimeNG 之后加载自定义 CSS？

【参考方案1】：

这对我有用

::ng-deep body .ui-panelmenu .ui-panelmenu-header.ui-state-active > a:hover
  color: red;
  background-color: red;
  
  :host >>>
  ::ng-deep .ui-panelmenu .ui-panelmenu-header.ui-state-active > a 
    color: red;
    background-color: red;
    border: 1px solid  rgb(212, 210, 210); 
  
  :host >>>
  ::ng-deep .ui-panelmenu .ui-panelmenu-header.ui-state-active > a:hover 
    color: red;
    background-color: red;
    border: 1px solid  rgb(212, 210, 210);