Angular中如何增大Mat Stepper圆形图标的宽高（CSS不生效）

样式不生效的核心原因 #

Angular 默认的视图封装机制会隔离组件内部的样式，加上 Angular Material 自身组件的样式优先级更高，常规写在组件内的自定义CSS既选不中步进器内部的DOM节点，也无法覆盖默认样式，导致修改不生效。

可落地的解决方案 #

方案1：全局样式直接覆盖（推荐，无封装限制） #

将自定义样式写入项目根目录下的全局样式文件（一般是src/styles.scss或src/styles.css），无需考虑视图封装的影响，直接对准节点写覆盖规则：

// 全局样式文件内写入
.mat-horizontal-stepper {
  .mat-step-icon {
    // 替换为你需要的圆形尺寸
    width: 40px;
    height: 40px;
    // 同步调整内部数字、状态图标的字号与对齐，避免内容错位
    .mat-step-icon-state,
    .mat-step-number {
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

注意：如果自定义样式被Material默认样式覆盖，可在属性值后加!important提升优先级。

方案2：组件内样式穿透（无需全局写样式时使用） #

如果不想把通用样式散落在全局文件，可在对应步进器所属组件的样式文件中，用::ng-deep绕过视图封装限制触达内部DOM：

// 组件对应的xxx.component.scss文件内写入
::ng-deep .mat-horizontal-stepper .mat-step-icon {
  width: 40px;
  height: 40px;
  .mat-step-icon-state,
  .mat-step-number {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

注意：::ng-deep 目前已被Angular官方标记为废弃语法，长期项目维护优先选择全局覆盖的方案。

方案3：主题变量定制（长期维护最规范的方式） #

如果项目已经配置了自定义的Angular Material主题，可直接在定义步进器主题时设置图标尺寸变量，从根源上替换默认值，不需要写硬覆盖的CSS：

@use '@angular/material' as mat;
// 自定义步进器主题配置
$custom-stepper: mat.define-stepper-theme(
  $icon-size: 40px, // 直接指定圆形节点的尺寸
);
// 将自定义步进器主题合并到全局主题配置中即可生效

常见踩坑提醒 #

• 不要错选DOM节点：步进器的圆形图标对应类名是.mat-step-icon，不是.mat-step或者步进器根节点本身，选错节点修改自然不生效
• 不要只改圆形宽高不同步调整内部内容：圆形尺寸变大后，原默认的数字、对勾图标字号偏小，且默认居中对齐的逻辑不会随宽高自动适配，很容易出现内容偏移，需要同步调整内部元素的字号与对齐规则
• labelPosition设为bottom时无需额外调整布局，上述样式不会影响底部标签的位置

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