如何修改PrimeNG 18中p-card组件的背景颜色？

针对你在Angular 18 + PrimeNG 18.0.0-beta.2环境下遇到的p-card-body背景色修改无效问题，给你几个可行的解决思路：

1. 确认DOM选择器准确性 #

先用浏览器开发者工具（F12）查看p-card的实际DOM结构——beta版本组件结构可能有调整。检查p-card内部的body元素class是否还是p-card-body，如果class名称变更，同步修改CSS选择器即可。

2. 组件内样式使用Angular样式穿透 #

如果是在组件的.scss/.css文件中设置样式，由于Angular默认的ViewEncapsulation.Emulated会给样式添加作用域前缀，导致无法影响PrimeNG子组件DOM，需要用::ng-deep做穿透处理：

:host ::ng-deep .p-card .p-card-body {
  background-color: purple;
}

:host确保样式只作用于当前组件内的p-card，避免全局污染。

3. 利用PrimeNG的CSS变量（推荐） #

PrimeNG 18大量使用CSS变量简化样式定制，你可以直接覆盖对应变量，无需穿透或!important：

.p-card {
  --p-card-body-bg: purple;
}

这种方式符合PrimeNG设计规范，更易维护。

4. 全局样式文件中直接设置 #

如果希望所有p-card都生效，可在项目根目录的styles.scss（或styles.css）中添加样式，这里的样式默认全局生效，无需穿透：

.p-card .p-card-body {
  background-color: purple;
}

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