如何在Angular Material的mat-toolbar中自定义mat-form-field样式？

我正在使用最新版Angular Material，给设置了primary颜色的mat-toolbar添加搜索输入框，代码如下：

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <mat-form-field class="search-form-field" color="primary">
      <mat-icon matPrefix>search</mat-icon>
      <input type="text" aria-label="Number" matInput />
    </mat-form-field>
  </mat-toolbar-row>
</mat-toolbar>

需要自定义这个mat-form-field的样式，核心是移除预构建主题自带的whitesmoke背景色，同时可能调整文本颜色等。之前用已弃用的::ng-deep实现了部分效果，想知道正确的实现方式。

正确实现方案（替代::ng-deep） #

Angular官方推荐通过自定义类+全局样式、调整视图封装策略或自定义Material主题来实现，以下是具体方法：

1. 自定义类 + 全局样式文件（推荐）

利用全局样式不受组件视图封装限制的特性，给目标元素添加自定义类后，在全局样式文件（如styles.scss）中编写样式：

// 全局styles.scss中添加
.search-form-field {
  // 移除form-field背景色
  .mat-mdc-form-field-surface {
    background-color: transparent;
  }

  // 修改输入框文本颜色
  input.mat-mdc-input-element {
    color: #fff;
  }

  // 修改前缀搜索图标颜色
  .mat-mdc-form-field-icon-prefix {
    color: rgba(255,255,255,0.7);
  }

  // 可选：修改下划线/边框颜色
  .mat-mdc-line-ripple {
    border-color: #fff;
  }
}

注：如果样式优先级不足，可添加!important，或使用更具体的选择器（如结合父元素类名）。

2. 调整组件视图封装策略（适合单个组件）

在组件装饰器中关闭视图封装，让组件样式直接作用于内部元素：

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

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

然后在组件的scss文件中编写样式：

.search-form-field .mat-mdc-form-field-surface {
  background-color: transparent;
}
// 其他样式同全局方案

注：此方式会让组件样式全局生效，需注意避免样式冲突。

3. 自定义Angular Material主题（全局统一调整）

如果需要全局统一修改所有mat-form-field的样式，可通过自定义Material主题实现：

// 主题文件（如theme.scss）
@use '@angular/material' as mat;

// 定义基础主题
$custom-primary: mat.define-palette(mat.$indigo-palette);
$custom-accent: mat.define-palette(mat.$pink-palette);
$custom-warn: mat.define-palette(mat.$red-palette);

$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  ),
));

// 覆盖form-field的surface背景色
@include mat.form-field-theme($custom-theme);
@include mat.form-field-color($custom-theme, (
  surface: transparent,
  text-color: #fff, // 全局调整文本颜色
));

方案优先级 #

优先选择自定义类+全局样式，既规避了::ng-deep的弃用风险，又不会引发全局样式冲突；若需全局统一配置，自定义Material主题是最优雅的长期方案。

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