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

Question

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

这是我的HTML代码。

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

Answer 1

解决你的问题有多种方法

1. 您可以将PrimeNg配置为使用暗主题。在此描述 (更改所有组件，所以可能不是解决方案)
2. 您还可以自定义PrimeNg主题以满足您的需求。我不知道这是怎么回事，但可能是在他们的文档中描述的。
3. 您可以使用：：ng-深度覆盖CSS。 下面是我在stackblitz上做的一个例子。 代码和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;
}

​

更新:添加文本样式，根据of其他答复的请求

​

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

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

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

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