[FIXED] How to change primeng Panel Menu style using scss

Issue

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>

Solution

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 also customize the PrimeNg theme to suite your needs. I don’t know how tho, but it is probably described on their documentation.

  3. 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;
}

UPDATE: Added styling of text, per request from OPs other answer

/* Header text on hover */

::ng-deep p-panelmenu .p-component.p-panelmenu-header.p-highlight>a {
  color: white;
}


/* Header text normal */

::ng-deep p-panelmenu .p-component.p-panelmenu-header>a {
  color: red;
}


/* Expand icon on contents */

::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
  color: red;
}


/* icons in content next to text */

::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text {
  color: green;
}


/* Text */

::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
  color: blue;
}

Answered By – FajitasMoose

Answer Checked By – Marie Seifert (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published