Angular：如何为PrimeNG p-steps组件的已完成步骤设置样式？

PrimeNG 14确实移除了p-steps-complete类，不过可以通过以下两种方式实现自定义样式：

方案一：使用CSS :has伪类（通用、简洁） #

利用:has伪类选择当前步骤（.p-highlight）之前的所有步骤作为已完成状态，结合兄弟选择器处理未完成步骤，无需依赖具体步骤索引：

1. 保持原有模板不变 #

<p-steps
  #stepModule
  [model]="items"
  [readonly]="false"
  [activeIndex]="stepEvent.stepIndex">
</p-steps>

2. 添加组件内样式（需用::ng-deep穿透样式封装） #

::ng-deep .p-steps {
  /* 已完成步骤：当前步骤之前的所有步骤 */
  .p-step:has(~ .p-highlight) {
    .p-step-number {
      background-color: #2ecc71; /* 绿色背景 */
      color: #fff; /* 白色数字 */
    }
    .p-step-title {
      color: #2ecc71;
      font-weight: 600;
    }
  }

  /* 当前步骤样式 */
  .p-step.p-highlight {
    .p-step-number {
      background-color: #3498db; /* 自定义当前步骤背景色 */
      color: #fff;
    }
    .p-step-title {
      color: #3498db;
      font-weight: 600;
    }
  }

  /* 未完成步骤：当前步骤之后的所有步骤 */
  .p-highlight ~ .p-step {
    .p-step-number {
      background-color: #bdc3c7; /* 灰色背景 */
      color: #7f8c8d;
    }
    .p-step-title {
      color: #7f8c8d;
    }
  }
}

方案二：动态添加类（兼容性更好） #

如果需要兼容不支持:has伪类的旧浏览器，可以根据activeIndex给p-steps添加动态类，再针对性设置样式：

1. 修改模板添加动态类 #

<p-steps
  #stepModule
  [model]="items"
  [readonly]="false"
  [activeIndex]="stepEvent.stepIndex"
  [class.steps-active-0]="stepEvent.stepIndex === 0"
  [class.steps-active-1]="stepEvent.stepIndex === 1"
  [class.steps-active-2]="stepEvent.stepIndex === 2"
  [class.steps-active-3]="stepEvent.stepIndex === 3">
</p-steps>

2. 对应添加样式 #

::ng-deep .p-steps {
  /* 当前为第2步（索引1），已完成第1步 */
  &.steps-active-1 {
    .p-step:nth-child(1) .p-step-number {
      background-color: #2ecc71;
      color: #fff;
    }
  }

  /* 当前为第3步（索引2），已完成第1、2步 */
  &.steps-active-2 {
    .p-step:nth-child(1) .p-step-number,
    .p-step:nth-child(2) .p-step-number {
      background-color: #2ecc71;
      color: #fff;
    }
  }

  /* 当前为第4步（索引3），已完成第1-3步 */
  &.steps-active-3 {
    .p-step:nth-child(-n + 3) .p-step-number {
      background-color: #2ecc71;
      color: #fff;
    }
  }

  /* 当前步骤样式 */
  .p-step.p-highlight .p-step-number {
    background-color: #3498db;
    color: #fff;
  }

  /* 未完成步骤样式 */
  .p-highlight ~ .p-step .p-step-number {
    background-color: #bdc3c7;
    color: #7f8c8d;
  }
}

注意：::ng-deep用于穿透Angular的组件样式封装，确保样式能作用到PrimeNG的内部DOM元素。

内容的提问来源于stack exchange，提问作者O.Eight