更改primeng PanelMenu样式

Question

我正在尝试更改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（我不知道为什么这些项重叠）

Answer 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); 
  }