如何深度修改Angular Material组件的结构与样式？

当然有很多开发者成功深度定制过Angular Material组件！我自己也帮不少项目做过类似的form-field改造，把它改成完全自定义的外观和行为，下面给你分享具体的思路和实操步骤：

1. CSS穿透覆盖默认样式（快速适配） #

Angular Material组件的样式默认封装在Shadow DOM中，直接写全局CSS无法生效，需要用:host ::ng-deep语法穿透样式隔离，把你的自定义CSS应用到内部元素：

/* 移除form-field默认的外层间距和边框 */
:host ::ng-deep .mat-form-field-wrapper {
  padding-bottom: 0;
  margin: 0;
}
:host ::ng-deep .mat-form-field-outline {
  display: none;
}

/* 替换成你自己的输入框样式 */
:host ::ng-deep .mat-input-element {
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}
:host ::ng-deep .mat-input-element:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* 自定义标签（label）样式 */
:host ::ng-deep .mat-form-field-label {
  color: #666;
  font-size: 14px;
}

2. 封装自定义组件（彻底掌控外观与行为） #

如果要完全脱离Angular Material的默认行为逻辑，最好把form-field和输入框封装成自己的组件，同时兼容Angular表单的ControlValueAccessor接口，这样能完美适配表单校验、双向绑定等功能：

组件类代码（custom-input.component.ts） #

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  @Input() placeholder: string = '';
  @Input() label: string = '';
  value: string = '';
  private onChange: any = () => {};
  private onTouched: any = () => {};

  writeValue(value: any): void {
    this.value = value || '';
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  handleInput(event: Event) {
    const target = event.target as HTMLInputElement;
    this.value = target.value;
    this.onChange(this.value);
  }

  handleBlur() {
    this.onTouched();
  }
}

组件模板（custom-input.component.html） #

<div class="custom-input-wrapper">
  <label *ngIf="label" class="custom-label">{{ label }}</label>
  <input 
    type="text"
    [placeholder]="placeholder"
    [value]="value"
    (input)="handleInput($event)"
    (blur)="handleBlur()"
    class="custom-input"
  >
</div>

组件样式（custom-input.component.css） #

直接用你自己写的纯CSS样式即可：

.custom-input-wrapper {
  width: 100%;
  margin-bottom: 16px;
}
.custom-label {
  display: block;
  margin-bottom: 4px;
  color: #333;
  font-weight: 500;
}
.custom-input {
  width: 100%;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.custom-input:focus {
  border-color: #6200ee;
  box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.1);
  outline: none;
}
.custom-input::placeholder {
  color: #9e9e9e;
}

3. 自定义行为逻辑（比如错误提示） #

如果需要保留Angular Material的表单校验逻辑，但修改错误提示的样式或显示方式，可以用ng-template matError自定义错误内容，再用CSS调整样式：

<mat-form-field>
  <input matInput placeholder="邮箱" [formControl]="emailControl">
  <ng-template matError>
    <div class="custom-error-text">请输入有效的邮箱地址</div>
  </ng-template>
</mat-form-field>

:host ::ng-deep .mat-form-field-error-wrapper {
  margin-top: 4px;
}
.custom-error-text {
  color: #d32f2f;
  font-size: 12px;
  font-weight: 400;
}

总的来说，只要掌握CSS穿透和组件封装这两个核心技巧，完全可以把Angular Material的form-field改造成你想要的外观和行为——很多企业项目都会这么做，既利用了Angular Material成熟的表单逻辑，又能保持产品的独特UI风格。

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