Css 更改素描面板菜单样式

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

我已经更改了全局背景色

我会将主菜单的颜色改为白色，子菜单则保持为黑色

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

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

我已经把很多组合都和这个词联系起来了，但是没有人在起作用 在开发工具中，我可以在这里更改它

但通过将其复制到css中，不会进行任何更改

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

这里有一个问题（我不知道为什么项目重叠）

这对我来说很有效

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

---

你能创建一个Plunker吗？我已经添加了一个Plunkr，你在Priming的CSS之后加载你的自定义CSS吗？

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