如何修改Angular Material输入框点击聚焦时的高亮颜色

Angular Material 组件默认开启视图封装，且自带主题样式优先级较高，普通CSS选择器无法直接覆盖，可通过以下两种方案修改聚焦高亮颜色为白色：

方案1：全局覆盖（全项目生效，推荐） #

在项目全局样式文件styles.scss（或styles.css）中添加以下代码：

/* 针对fill外观的输入框 */
.mat-form-field-appearance-fill .mat-form-field-underline::before {
  background-color: white !important;
}
.mat-form-field-appearance-fill.mat-focused .mat-form-field-label {
  color: white !important;
}
.mat-form-field-appearance-fill .mat-form-field-ripple {
  background-color: white !important;
}

/* 如果用的是outline外观的输入框，替换为以下代码 */
/*
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: white !important;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-label {
  color: white !important;
}
*/

方案2：单组件覆盖（仅对当前组件生效） #

如果不需要全局改动，可在对应组件的样式文件中使用::ng-deep穿透视图封装，同时用:host限定样式作用范围避免污染全局：

:host ::ng-deep .mat-form-field-ripple {
  background-color: white !important;
}
:host ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: white !important;
}
:host ::ng-deep .mat-form-field-underline::before {
  background-color: white !important;
}

如果你的Angular Material版本和示例不同，可通过浏览器F12开发工具选中聚焦状态的输入框，找到对应高亮元素的类名调整选择器即可。

内容的提问来源于stack exchange，提问作者Rajesh Kumar Duraisamy