如何覆盖mat-form-field生成的第一个div的CSS样式？

问题背景 #

我的<mat-card>中有多个字段，其中最后一个字段导致卡片底部出现过多内边距（padding）。生成的DOM结构如下：

<mat-form-field id="this-feels-hacky-and-wrong"...>
 <!-- 我想移除该元素的padding-bottom -->
 <div class="mat-input-wrapper mat-form-field-wrapper">
  ...
 </div>
</mat-form-field>

我在style.css中添加了如下代码，虽生效但不够规范：

#this-feels-hacky-and-wrong div{
 padding-bottom: 0;
}

我更希望在component.scss文件中找到更优解决方案。

这确实是Angular Material组件样式定制时常见的小困扰——组件的视图封装机制会阻止我们直接在组件样式文件里修改内部生成的DOM元素样式。下面给你几个更优雅的组件内解决方案：

• 方案一：使用::ng-deep结合自定义类（推荐）
  先给目标<mat-form-field>添加一个专属的自定义类，避免全局样式污染：

  <mat-form-field class="last-card-field" ...>
    <!-- 表单内容 -->
  </mat-form-field>
  

  然后在component.scss中通过::ng-deep穿透视图封装，精准定位到目标div：

  ::ng-deep .last-card-field .mat-form-field-wrapper {
    padding-bottom: 0;
  }
  

  这种方式只会作用于当前组件内带有last-card-field类的表单字段，既精准又不会影响全局样式。

• 方案二：关闭组件的视图封装
  如果你不想使用::ng-deep，可以在组件的装饰器中关闭视图封装：

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

  之后就能在component.scss中直接写样式，但要注意加上自定义类避免全局污染：

  .last-card-field .mat-form-field-wrapper {
    padding-bottom: 0;
  }
  

  缺点是组件内的所有样式都会变成全局样式，需要格外注意类名的唯一性，避免和其他组件冲突。

• 方案三：利用Angular Material的自定义主题变量（进阶）
  如果你希望从全局层面调整所有<mat-form-field>的底部内边距，可以在自定义主题文件中修改对应的变量：

  @use '@angular/material' as mat;
  
  $custom-form-field-theme: mat.define-form-field-theme(
    mat.define-light-theme((
      color: ...,
      typography: ...,
      density: ...
    )),
    (
      wrapper-padding-bottom: 0 // 自定义底部内边距
    )
  );
  

  这种方式适合需要统一调整所有表单字段样式的场景，不过如果只是针对单个字段，前两种方案更灵活。

对比你之前用ID选择器的方式，这些方案都更精准、模块化，符合Angular组件化的设计理念。

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