如何使用scss更改primeng面板菜单样式

Question

I want to change my panel menu color to black.

here is my HTML code.

<p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu>

Answer 1

There are multiple ways to solve your problem

1. You can configure PrimeNg to use a dark theme. Described here (Changes all components, so probably not the solution)

2. You can override the CSS with ::ng-deep.

   Here is an example I made on stackblitz

   Screenshot of code and PanelMenu

 /* Headers normal look */ ::ng-deep .p-panelmenu .p-panelmenu-header>a { background-color: lightblue; } /* Header on expanded content */ ::ng-deep .p-panelmenu .p-panelmenu-header.p-highlight>a { background-color: red; } /* Header on hover, but not expanded */ ::ng-deep .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled)>a:hover { background-color: blueviolet; } /* Header on hover, but ALSO Expanded */ ::ng-deep .p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled)>a:hover { background-color: yellow; } /* Content (that is expanded/toggled) */ ::ng-deep .p-panelmenu .p-panelmenu-content { background-color: aquamarine; } /* Color of border around eacch each header*/ ::ng-deep .p-panelmenu .p-panelmenu-header>a { border-color: chartreuse; }

Answer 2

I could change the Panel Menu background color get help from @FajitasMoose. But I couldn't change the font color in the list menu under the Project Management.

Right now I tried using the below .scss code.

::ng-deep .p-panelmenu ul li:nth-child(1) {
    color: blue;
}