Primeng 样式不会在所有页面中覆盖。 p-dialog 样式不覆盖 p-confirmdialog 样式答案

【问题标题】：primeng style to not override in all the pages. p-dialog style to not override p-confirmdialog stylePrimeng 样式不会在所有页面中覆盖。 p-dialog 样式不覆盖 p-confirmdialog 样式
【发布时间】：2021-11-21 14:05:25
【问题描述】：

我有primeng，喜欢随附的屏幕截图。

正如你所看到的，这两个primeng html标签都有div类“p-dialog-mask p-component-overlay p-dialog-mask-scrollblocker”。当对话框打开时，我希望父页面有一个不同的叠加层，而当确认对话框打开时，我想要一个不同的叠加层。我在下面尝试过：

p-dialog, .p-dialog-mask.p-component-overlay{
    background-color: #000;
}

p-confirmdialog, .p-confirmdialog-mask.p-component-overlay{
    background-color: #rgba(0, 0, 0, 0.4)!important;
}

这没用。我尝试在 p-confirmDialog 标签中使用带有 [styleClass] 的不同样式，但即使这样也行不通。无论我给出什么，它都需要 p-dialog 的 css 而不是为 p-confirmdialog 选择不同的 css。

现在我添加了如下类名：

.p-dialog-mask.p-component-overlay.ng-tns-c45-0,  
.p-dialog-mask.p-component-overlay.ng-tns-c45-1,
.p-dialog-mask.p-component-overlay.ng-tns-c45-2,
.p-dialog-mask.p-component-overlay.ng-tns-c30-0,
.p-dialog-mask.p-component-overlay.ng-tns-c30-1,
.p-dialog-mask.p-component-overlay.ng-tns-c30-2{
    background-color: #000;
}

这可行，但在所有环境中都不一致。当我将代码移动到 UAT 时，生成的类名在浏览器中是不同的，我必须不断更改 .有没有办法我可以在不触及类名的情况下更改样式。我希望这将在 p-dialog 和 p-confirmdialog 中处理。请有任何建议。此外，我只会在主页上为 p-dialog 添加黑色，而在其余页面中，它应该采用默认 css。

高度赞赏任何帮助。谢谢。

【问题讨论】：

标签： html css angular primeng

【解决方案1】：

我认为它来自风格隔离

尝试在要覆盖的类上添加:host ::ng-deep。

我不得不在我的项目中使用primeng多次这样做。

例如

:host ::ng-deep .p-chips.p-component {
  width: 100%;
}

在你的情况下，它会是

:host ::ng-deep p-dialog, 
:host ::ng-deep .p-dialog-mask.p-component-overlay {
    background-color: #000;
}

:host ::ng-deep p-confirmdialog, 
:host ::ng-deep .p-confirmdialog-mask.p-component-overlay {
    background-color: #rgba(0, 0, 0, 0.4) !important;
}

【讨论】：