Angular样式插入顺序异常导致PrimeNG组件自定义样式无法生效问题

1. Angular的全局样式加载顺序由angular.json中styles数组的排序决定，排在后方的样式同优先级下权重更高。如果PrimeNG的全局样式引入顺序晚于你的自定义样式，默认就会覆盖你的规则。
2. PrimeNG组件默认开启ViewEncapsulation.Emulated模拟样式封装，组件自带的样式会被Angular添加唯一属性选择器提高权重。如果PrimeNG组件属于懒加载模块，其样式会在组件首次渲染时动态插入到<head>标签的末尾，此时即便你的自定义全局样式写在angular.json最后，同优先级下动态插入的PrimeNG样式也会覆盖你的规则。
3. 自定义样式的选择器权重低于PrimeNG组件自带的样式选择器权重，比如PrimeNG使用.p-progressbar.p-component的多类组合选择器，仅使用.p-progressbar单类选择器无法覆盖。

• 调整angular.json的styles数组顺序，将PrimeNG相关全局样式放在最前，自定义全局样式放在最后：

"styles": [
  "node_modules/primeng/resources/themes/你使用的主题/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "src/styles.scss" // 自定义全局样式放在最后
]

• 提高自定义样式的选择器权重，可通过叠加类名、增加父级自定义类的方式实现：

/* 叠加PrimeNG自带类名提高权重 */
.p-progressbar.p-component {
  height: 10px;
}
/* 增加自定义父级类名，权重更高 */
.my-custom-container .p-progressbar {
  height: 10px;
}

• 局部使用::ng-deep伪类（Angular当前版本仍兼容支持），如果你在业务组件内写样式覆盖PrimeNG规则：

/* 写在业务组件的样式文件中 */
::ng-deep .p-progressbar {
  height: 10px;
}

• 极端场景下可添加!important强制覆盖规则，不建议大规模使用，避免后续样式维护混乱：

.p-progressbar {
  height: 10px !important;
}

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