如何修改Mat Toolbar上matInput的文本颜色为白色、边框为黑色

要让matInput文本框的文本显示为白色、边框显示为黑色，只需通过自定义CSS覆盖Angular Material的默认样式即可，注意组件样式隔离的特性，可按以下方式实现：

• 如果在组件的样式文件中编写，需要使用::ng-deep穿透样式隔离；如果写在全局样式文件（如styles.css）中，则无需::ng-deep：

/* 设置输入框文本为白色 */
::ng-deep .mat-input-element {
  color: white !important;
}

/* 聚焦时的标签颜色也设为白色（可选，根据需求调整） */
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: white;
}

/* 针对outline外观的输入框，设置边框为黑色 */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: black !important;
}

/* 聚焦时保持边框为黑色 */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: black !important;
}

/* 如果是fill外观的输入框，调整如下 */
::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
  border: 1px solid black !important;
}

根据你实际使用的表单域外观（outline/fill等），选择对应的样式代码即可，这样就能覆盖Toolbar带来的样式影响，达到需求的效果。

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