如何用CSS调整Angular Material步进器的内边距？

我太懂你这种想做紧凑表单的需求了！直接改.mat-horizontal-stepper-header没生效，大概率是Angular的视图封装机制在搞鬼——它会把组件内部的样式隔离起来，外部写的普通样式根本碰不到Material组件的内部类。下面给你几种靠谱的解决方案：

方案1：用::ng-deep穿透视图封装（推荐） #

这是最常用的方式，既能修改目标组件样式，又不会污染全局。记得搭配:host来限制样式只作用于当前组件：

// 在你的组件样式文件（比如xxx.component.scss）里写
:host ::ng-deep .mat-horizontal-stepper-header {
  padding: 0 10px; // 替换成你想要的内边距值
}

• :host表示只针对当前组件的宿主元素，避免影响其他页面的步进器
• ::ng-deep能突破视图封装，让样式渗透到Material步进器的内部DOM

如果担心优先级不够，可以给步进器加个自定义类，比如在模板里写：

<mat-horizontal-stepper class="compact-stepper">
  <!-- 步进器内容 -->
</mat-horizontal-stepper>

然后样式改成更具体的选择器，不用!important也能生效：

:host ::ng-deep .compact-stepper .mat-horizontal-stepper-header {
  padding: 0 10px;
}

方案2：修改全局样式文件 #

如果你的所有步进器都需要紧凑样式，可以直接在全局样式文件（styles.scss/styles.css）里写：

// 全局生效
.mat-horizontal-stepper-header {
  padding: 0 10px;
}

要是只想改特定的步进器，同样用自定义类来限制范围：

.compact-stepper .mat-horizontal-stepper-header {
  padding: 0 10px;
}

方案3：关闭组件的视图封装 #

不推荐，但如果其他方法都不好使可以试试。在组件的元数据里添加encapsulation: ViewEncapsulation.None：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourComponentComponent {}

⚠️ 注意：这样会让组件里的样式变成全局样式，容易和其他组件的样式冲突，一定要谨慎使用！

最后检查小技巧 #

改完样式后，打开Chrome开发者工具的「Elements」面板，找到.mat-horizontal-stepper-header元素，看「Styles」标签里你的样式有没有被划掉：

• 如果被划掉，说明优先级不够，要么加更具体的选择器，要么临时用!important救急（尽量少用）
• 如果没显示你的样式，说明路径写错了，或者视图封装没穿透成功

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