Primeng Angular 改变p-对话框背景颜色

Question

我一直在努力根据条件更改对话框的背景颜色。

堆栈闪电战

changeColor 是我正在检查是否为真的变量。适用于更改其他标签的背景颜色。假设对话框可能需要某种进一步的覆盖。我想要的只是在它上面进行某种覆盖，沿着这条线改变颜色。

我尝试过内联、全局 CSS 样式。即使将对话框内容包装在带有样式的 div 中也会有奇怪的行为。

Answer 1

如果要更改对话框内容的颜色，则需要使用

styleClass

在对话框上设置类，然后使用

.p-dialog-title

、

.p-dialog-content

和

.p-dialog-footer

设置内部元素的样式。

代码如下所示。

<!-- template -->
<p-dialog
  header="Long Content"
....
  [styleClass]="changeColor ? 'lightgray' : ''"
>

:host ::ng-deep .lightgray .p-dialog-header {
  background-color: lightgray;
}

如果您想在对话框后面有一个遮罩层，您可以在对话框上设置

[modal]="true"

，使其在对话框后面显示一个透明层。