Angular15+PrimeNG15：如何样式化p-confirmDialog内的p-dropdown和p-chips

问题根源 #

1. 样式作用域限制：Angular组件默认启用ViewEncapsulation.Emulated，组件内的样式仅作用于当前组件DOM，而p-confirmDialog是动态挂载到根节点（<body>）的，不在当前组件DOM树中，导致组件内的scoped样式无法生效。
2. 自定义组件属性传递：你的app-dropdown是自定义组件，需确保外部传入的class属性能传递到内部的p-dropdown控件上。
3. PrimeNG组件样式层级：p-chips的styleClass仅作用于外层容器，需通过容器类定位内部输入元素才能让样式生效。

具体实现步骤 #

1. 处理样式穿透（二选一即可） #

方案A：使用::ng-deep穿透作用域

修改app-modal.component.scss，给样式添加::ng-deep前缀，让样式能作用到动态生成的p-confirmDialog内容：

::ng-deep .element {
    border: none !important;
}

::ng-deep .inputtext {
    background: rgb(255 255 255 / 60%) no-repeat;
    background-image: linear-gradient(to bottom, #1565C0, #1565C0), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
    background-size: 0 2px, 100% 1px;
    background-position: 50% 100%, 50% 100%;
    background-origin: border-box;
}

::ng-deep .inputtext:enabled:focus {
    box-shadow: none;
    background-color: rgb(255 255 255 / 60%);
    border-color: transparent;
    background-size: 100% 2px, 100% 1px;
}

::ng-deep .inputtext:enabled:hover {
    background-color: rgb(255 255 255 / 60%);
    border-color: transparent;
    background-image: linear-gradient(to bottom, #1565C0, #1565C0), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
}

/* 针对p-chips内部输入框的额外样式 */
::ng-deep .inputtext .p-chips-input {
    background: transparent;
    border: none;
}

方案B：将样式移到全局样式文件

把上述样式复制到项目根目录的styles.scss（全局样式文件）中，全局样式会作用于所有DOM元素，包括动态生成的p-confirmDialog。

2. 修复自定义app-dropdown的class传递 #

打开app-dropdown.component.ts，添加接收class属性的输入绑定：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dropdown',
  templateUrl: './app-dropdown.component.html',
  styleUrls: ['./app-dropdown.component.scss']
})
export class AppDropdownComponent {
  @Input() class: string; // 接收外部传入的class
  // 保留其他已有的Input属性
}

在app-dropdown.component.html中，将class绑定到内部的p-dropdown上：

<p-dropdown [class]="class" [options]="options" optionLabel="value" ...>
  <!-- 组件原有内容 -->
</p-dropdown>

3. 验证p-chips样式生效 #

通过styleClass="element inputtext"结合::ng-deep或全局样式，内部输入框会通过.inputtext .p-chips-input选择器应用样式，确保背景和边框效果正确显示。

内容的提问来源于stack exchange，提问作者Tim Kruger