更改primeng PanelMenu 样式答案

【问题标题】：change primeng PanelMenu styles更改primeng PanelMenu 样式
【发布时间】：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？

标签： css angular primeng

【解决方案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); 
  }

【讨论】：