如何为特定Angular Material输入组件自定义样式？

要让这些样式仅作用于特定的mat-input/mat-select，核心是通过自定义类限定样式作用范围，避免::ng-deep无差别穿透到全局。具体步骤如下：

1. 给目标组件添加自定义类 #

在模板中，给需要应用自定义样式的mat-form-field（包含mat-select所在的mat-form-field）添加自定义类，比如custom-styled-field：

<!-- 需要自定义样式的输入框 -->
<mat-form-field appearance="outline" class="custom-styled-field">
  <mat-label>自定义样式输入框</mat-label>
  <input matInput>
</mat-form-field>

<!-- 需要自定义样式的选择器 -->
<mat-form-field appearance="outline" class="custom-styled-field">
  <mat-label>自定义样式选择器</mat-label>
  <mat-select>
    <mat-option value="option1">选项1</mat-option>
    <mat-option value="option2">选项2</mat-option>
  </mat-select>
</mat-form-field>

<!-- 这个输入框不会应用自定义样式 -->
<mat-form-field appearance="outline">
  <mat-label>默认样式输入框</mat-label>
  <input matInput>
</mat-form-field>

2. 修改CSS样式，限定作用范围 #

将原来的::ng-deep选择器全部包裹在自定义类的选择器下，这样样式只会作用于该类内部的Material组件，不会影响全局或后续加载的组件：

/* 仅作用于带custom-styled-field类的元素内部 */
.custom-styled-field ::ng-deep .mat-step-header .mat-step-icon-selected,
.custom-styled-field ::ng-deep .mat-step-header .mat-step-icon-state-done,
.custom-styled-field ::ng-deep .mat-step-header .mat-step-icon-state-edit {
  background-color: red !important;
}

.custom-styled-field ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: white !important;
}

.custom-styled-field ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: white !important;
}

.custom-styled-field ::ng-deep
  .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid
  .mat-form-field-outline-thick {
  color: red !important;
  opacity: 0.8 !important;
}

.custom-styled-field ::ng-deep .mat-input-element {
  caret-color: red !important;
}

.custom-styled-field ::ng-deep .mat-form-field-invalid .mat-input-element,
.custom-styled-field ::ng-deep .mat-warn .mat-input-element {
  caret-color: red !important;
}

.custom-styled-field ::ng-deep .mat-form-field-label {
  color: white !important;
}

.custom-styled-field ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: white !important;
}

.custom-styled-field ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
  color: red !important;
}

.custom-styled-field ::ng-deep .mat-select-value-text {
  color: white !important;
}

.custom-styled-field ::ng-deep .mat-select-arrow {
  color: #fff !important;
}

额外优化：批量作用于容器内组件 #

如果需要给某个容器内的所有mat-form-field统一应用样式，不用逐个加类，直接给容器加自定义类即可：

<div class="custom-fields-container">
  <!-- 容器内的所有mat-form-field都会应用自定义样式 -->
  <mat-form-field appearance="outline">...</mat-form-field>
  <mat-form-field appearance="outline">...</mat-form-field>
</div>

对应的CSS只需把父选择器换成容器类：

.custom-fields-container ::ng-deep /* 后续选择器不变 */ { ... }

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