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

Question

我想将我的面板菜单颜色更改为黑色。

这是我的 HTML 代码。

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

Answer 1

有多种方法可以解决您的问题

您可以将 PrimeNg 配置为使用深色主题。 Described here（更改所有组件，因此可能不是解决方案）
您还可以自定义 PrimeNg 主题以满足您的需要。我不知道怎么回事，但可能在他们的文档中有描述。
您可以使用 ::ng-deep 覆盖 CSS。

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

更新：根据 OP 其他答案的要求添加了文本样式

/* 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;
}

Answer 2

我可以更改面板菜单背景颜色从@FajitasMoose 获得帮助。但是我在项目管理下的列表菜单中无法更改字体颜色。

现在我尝试使用下面的 .scss 代码。

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

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

How to change primeng Panel Menu style using scss

html

css

angular

sass

primeng