PanelMenu item style not applied

[gianluca-moro]

Describe the bug

The PanelMenu MenuItem has a style property for "Inline style of the menuitem". But, specifying styles using that property does not apply the styles.

E.g.,

this.items = [
  {
    label: 'Files',
    icon: 'pi pi-file',
    items: [
      {
        label: 'Documents',
        icon: 'pi pi-file',
        style: { color: 'red !important' },
      }
      // ...
    ]
  }
]

The Documents is not red:

Do I need to specify it differently. If so, how?

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/seknqoe4?file=src%2Fapp%2Fpanelmenu-basic-demo.ts

Environment

PrimeNG 21.1.6
Angular 21

Angular version

21.1.0

PrimeNG version

v21

Node version

No response

Browser(s)

Firefox, Chrome

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/seknqoe4?file=src%2Fapp%2Fpanelmenu-basic-demo.ts
2. You can see that the Documents menu item is not red, even though it has style: {color: 'red !important'} applied

Expected behavior

The MenuItem styles should be applied

[gamble4846]

This isn't a bug — style is working as designed, but it's applied to a different element than the label text.

Live example: StackBlitz demo — shows labelStyle used to color the "Documents" label red.

Solutions

To make the label text red, use labelStyle instead of style:

{
  label: 'Documents',
  icon: 'pi pi-file',
  labelStyle: { color: 'red' },
}

Do not use !important in style object values — it is not supported:

// This won't work
labelStyle: { color: 'red !important' }

---

Deeper explanation

Where style is applied

The style property is bound to the <li> element (the menu item row), not to the label <span>:

<li class="p-panelmenu-item" style="...">
  <div class="p-panelmenu-item-content">
    <a class="p-panelmenu-item-link">
      <span class="p-panelmenu-item-label">Documents</span>
    </a>
  </div>
</li>

Because of this structure, setting color on style won't change the label text:

{
  label: 'Documents',
  icon: 'pi pi-file',
  style: { color: 'red' }, // applied to <li>, not the label
}

Properties like background-color on style will still show on the row, but color on the <li> won't affect the label because child elements such as .p-panelmenu-item-link and .p-panelmenu-item-label have their own theme styles that override inherited color.

Why !important doesn't work

Angular's [ngStyle] / [style] object bindings do not support the !important flag in property values. Use labelStyle to apply styles directly on the label element instead.

MenuItem style properties reference

Property	Applied to	Use for
style	<li> (menu item row)	Row background, padding, margin
labelStyle	Label <span>	Label text color, font, etc.
linkStyle	Anchor <a>	Link-level styling
iconStyle	Icon <span>	Icon styling

[gianluca-moro]

@gamble4846 Wow, thanks for the very detailed explanation. That makes sense.