PrimeNG P-Card组件绑定动态类后自定义CSS样式不生效

PrimeNG 的 p-card 组件样式并不作用在 <p-card> 这个自定义宿主标签上，组件的背景、边框、内边距等默认样式，全部定义在组件内部类名为 .p-card 的子 div 上。你之前的类绑定逻辑本身没有问题，只是要么被Angular样式隔离挡住了，要么没选中真正承载样式的内部元素，才会出现加了类但不生效的问题。

不需要改动现有模板代码，只需要把CSS改成下面的写法即可。注意必须把穿透逻辑包裹在:host选择器内，避免样式泄露成全局样式：

:host {
  ::ng-deep p-card.activeCard .p-card {
    background-color: #000;
    /* 其他选中态样式按需加在这里，比如边框、阴影 */
    border: 2px solid #1677ff;
    border-radius: 8px;
  }
}

你之前的写法5不生效，就是因为把背景样式加在了p-card.p-element宿主标签上，内部的.p-card容器自带默认背景，会直接把宿主的背景完全盖住，自然看不到效果。

注意：::ng-deep 目前已被Angular标记为废弃特性，未来版本可能被移除，生产环境优先推荐方案2实现。

PrimeNG的p-card组件提供了styleClass输入属性，专门用来给内部的卡片根容器传递自定义类名，这种方式不需要依赖样式穿透，长期兼容性更好。
模板部分只需要把原来的[class.activeCard]换成styleClass的条件绑定即可，TS里的选中逻辑完全不用改：

<div class="card-image-comp">
  <p-card [styleClass]="profileCardSelected === 1 ? 'activeCard' : ''" (click)="selectProfileType(1)">
    <img src="../../../assets/icons/person.png">
  </p-card>
  <p>Paciente</p>
</div>
<div>
  <p-card [styleClass]="profileCardSelected === 2 ? 'activeCard' : ''" (click)="selectProfileType(2)">
    <img src="../../../assets/icons/estetoscopio.png">
  </p-card>
  <p>Profissional de Saúde</p>
</div>

对应的CSS不需要任何穿透，直接写类样式就能生效：

.activeCard {
  background-color: #000;
  border: 2px solid #1677ff;
  border-radius: 8px;
}

如果需要在宿主元素上保留activeCard类做其他逻辑判断，两种绑定方式可以同时使用，不会产生冲突。

• 写法1-3：Angular默认启用视图样式隔离，这几种写法的选择器作用域只会被限定在当前组件的自有模板元素上，根本无法作用到p-card组件的内部模板
• 写法4：虽然做了样式穿透，但没有选中内部承载样式的.p-card容器，样式加在宿主标签上会被内部容器的默认背景完全遮挡
• 写法5：问题和写法4一致，选中的是p-card宿主元素而非内部卡片容器，样式被遮挡无法显示

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