Angular框架下Nebular Stepper组件SCSS/HTML模板自定义方法咨询

嘿，刚上手Angular和Nebular组件的话，遇到这种主题变量覆盖不了的自定义需求确实容易懵，不过咱们一步步来，有两种核心方法能解决你的问题：

一、SCSS样式自定义（针对无主题变量支持的元素） #

Nebular组件的样式默认是封装隔离的，所以要修改那些没提供主题变量的元素，得用Angular的**深度选择器::ng-deep**来穿透样式隔离。下面给你举几个常用场景的例子：

1. 自定义已完成步骤的图标/数字外观 #

// 在你的组件styles.scss里添加
::ng-deep .nb-stepper-item.completed .nb-stepper-header-icon {
  background-color: #2ecc71; /* 替换成你想要的完成态背景色 */
  border-radius: 50%; /* 把默认方形改成圆形 */
  border: none; /* 去掉默认边框 */
}

::ng-deep .nb-stepper-item.completed .nb-stepper-header-text {
  color: #2ecc71; /* 完成态文字颜色同步 */
  font-weight: bold;
}

2. 自定义Stepper连接器（外观/尺寸） #

// 水平方向Stepper的连接器样式修改
::ng-deep .nb-stepper-horizontal .nb-stepper-item:not(:last-child)::after {
  border-top: 3px dashed #95a5a6; /* 改成虚线+加粗 */
  width: 90%; /* 调整连接器长度，默认是100% */
  margin-top: -1.5px; /* 因为边框加粗了，微调位置 */
}

// 垂直方向Stepper的连接器修改（如果用得到）
::ng-deep .nb-stepper-vertical .nb-stepper-item:not(:last-child)::after {
  border-left: 2px solid #ddd;
  height: 80%;
}

注意：::ng-deep尽量在组件内部的styles里使用，别放到全局styles.scss里，避免不小心影响其他组件的样式。如果非要全局修改，记得加上.nb-stepper的类名做范围限定。

二、HTML模板自定义（完全控制步骤头结构） #

如果单纯改样式满足不了，比如你想替换默认的数字图标、添加额外元素，Nebular的Stepper支持用nbStepHeader模板来自定义每个步骤的头部结构：

<nb-stepper orientation="horizontal">
  <!-- 自定义步骤1的头部 -->
  <nb-step #step1>
    <ng-template nbStepHeader>
      <div class="custom-step-header">
        <!-- 自定义完成态图标 -->
        <span *ngIf="step1.completed" class="completed-icon">✓</span>
        <!-- 未完成时显示数字 -->
        <span *ngIf="!step1.completed && !step1.selected" class="step-number">{{ step1.index + 1 }}</span>
        <!-- 选中时的特殊样式 -->
        <span *ngIf="step1.selected" class="selected-indicator">●</span>
        <!-- 自定义步骤标签 -->
        <span class="step-label">个人信息</span>
      </div>
    </ng-template>

    <!-- 步骤内容 -->
    <p>填写你的姓名、邮箱信息</p>
    <button nbButton nbStepperNext>下一步</button>
  </nb-step>

  <!-- 自定义步骤2的头部 -->
  <nb-step #step2>
    <ng-template nbStepHeader>
      <div class="custom-step-header">
        <span *ngIf="step2.completed" class="completed-icon">✓</span>
        <span *ngIf="!step2.completed && !step2.selected" class="step-number">{{ step2.index + 1 }}</span>
        <span *ngIf="step2.selected" class="selected-indicator">●</span>
        <span class="step-label">地址信息</span>
      </div>
    </ng-template>

    <p>填写你的收货地址</p>
    <button nbButton nbStepperPrevious>上一步</button>
    <button nbButton nbStepperNext>下一步</button>
  </nb-step>
</nb-stepper>

然后给自定义的头部加样式：

.custom-step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;

  .completed-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #27ae60;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }

  .step-number {
    width: 26px;
    height: 26px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f8c8d;
  }

  .selected-indicator {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .step-label {
    font-size: 13px;
    color: #2c3e50;
  }
}

这样你就完全掌控了步骤头的HTML结构和样式，想怎么改都可以。

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