Angular 17中如何覆盖PrimeNG p-divider组件的颜色？

问题根源 #

你遇到的问题是因为使用border-top简写属性覆盖颜色时，会同时重置border-top-style和border-top-width，而PrimeNG主题中.p-divider-solid的border-top-style: solid由于优先级或加载顺序问题，无法覆盖你写的简写属性，最终导致边框样式丢失。

解决方案 #

方案1：单独修改边框颜色（推荐） #

不使用border-top简写属性，而是单独设置border-top-color，这样不会影响原有的边框样式和宽度：

全局样式（styles.scss）

.p-divider.p-divider-horizontal:before {
  border-top-color: #你的目标颜色;
}

组件内样式（使用::ng-deep）

如果需要仅在当前组件内生效：

:host ::ng-deep .p-divider.p-divider-horizontal:before {
  border-top-color: #你的目标颜色;
}

方案2：完整指定border-top属性 #

如果必须使用简写属性，要完整包含样式、宽度和颜色，确保覆盖后样式不丢失：

.p-divider.p-divider-horizontal:before {
  border-top: 1px solid #你的目标颜色;
}

方案3：自定义PrimeNG主题（全局统一修改） #

如果希望所有p-divider都使用自定义颜色，推荐通过PrimeNG主题变量修改，更符合框架设计：

// 在导入PrimeNG主题前设置变量
$divider-color: #你的目标颜色;

// 导入PrimeNG主题（根据你使用的主题调整路径）
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

方案4：针对特定divider修改 #

如果只需要修改某个特定的p-divider，给组件添加自定义类：
模板中：

<p-divider class="custom-divider"></p-divider>

样式中（全局或组件内）：

.custom-divider.p-divider-horizontal:before {
  border-top-color: #你的目标颜色;
}

验证方法 #

修改后打开Chrome DevTools，查看.p-divider.p-divider-horizontal:before的样式，确认border-top-color已生效，且border-top-style为solid。

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