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

Question

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

这是我的 HTML 代码。

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

标签： htmlcssangularsassprimeng

Answer 1

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

1. 您可以将 PrimeNg 配置为使用深色主题。此处描述（更改所有组件，因此可能不是解决方案）

2. 您还可以自定义 PrimeNg 主题以满足您的需求。我不知道怎么做，但可能在他们的文档中有所描述。

3. 您可以使用 ::ng-deep 覆盖 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;
}

更新：根据 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;
}