如何修改mat-input的涟漪颜色？自定义mat-form-field颜色方法求助

针对你遇到的无法自定义<mat-form-field>涟漪和边框颜色的问题，以下是几种可行的实现方法：

方法1：使用::ng-deep穿透组件样式（快速生效） #

在组件的样式文件（.scss/.css）中添加以下代码，直接覆盖默认的涟漪和下划线颜色：

// 聚焦时的涟漪颜色
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: #ff5722 !important; // 替换为你的自定义颜色
}

// 聚焦时的下划线颜色
::ng-deep .mat-form-field.mat-focused .mat-form-field-underline {
  background-color: #ff5722 !important;
}

注意：如果只想修改特定的输入框，给对应的<mat-form-field>添加自定义类，缩小样式范围：

<mat-form-field class="custom-input-field">
  <input matInput type="number" ...>
</mat-form-field>

样式改为：

::ng-deep .custom-input-field.mat-focused .mat-form-field-ripple {
  background-color: #ff5722 !important;
}

方法2：自定义Angular Material主题（规范持久化方案） #

这种方法更符合Angular Material的主题设计体系，适合全局统一自定义颜色：

1. 在全局样式文件（styles.scss）中定义自定义调色板并构建主题：

@import '~@angular/material/theming';

// 定义自定义颜色调色板
$custom-ripple-palette: mat-palette($mat-orange, 500); // 可替换为任意颜色值
$custom-primary: mat-palette($mat-indigo);
$custom-accent: mat-palette($mat-pink);
$custom-warn: mat-palette($mat-red);

// 创建自定义主题
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

// 应用全局主题
@include angular-material-theme($custom-theme);

// 覆盖mat-form-field的涟漪颜色
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: mat-color($custom-ripple-palette) !important;
}

方法3：关闭组件视图封装（无穿透写法） #

在组件类中关闭ViewEncapsulation，让组件内的样式可以直接作用到Material组件：

1. 修改组件.ts文件：

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 {
  // 组件逻辑
}

2. 在组件样式文件中添加限定范围的样式：

.custom-input-field.mat-focused .mat-form-field-ripple {
  background-color: #ff5722;
}

.custom-input-field.mat-focused .mat-form-field-underline {
  background-color: #ff5722;
}

注意：关闭视图封装后，组件样式会全局生效，务必通过自定义类限定作用范围，避免影响其他组件。

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