仅对特定的 Angular Material 输入着色答案

【问题标题】：Coloring only specific Angular Material inputs仅对特定的 Angular Material 输入着色
【发布时间】：2022-11-27 21:57:22
【问题描述】：

我的组件 css 文件中定义了以下 css 样式：

::ng-deep .mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
  background-color: red !important;
}

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

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

::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;
}

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

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

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

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

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

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

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

它运行良好，但组件中的所有 matinputs（也例如 matselects）都是彩色的，我只想给特定的 matinputs 上色。即使在之后加载的其他组件中，matinputs 也会获取这些颜色变化。

对特定元素进行控制的方法是什么？

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

我通过从 css 到 scss 并在 css 周围放置一个“.custom-mat”来解决它，并在模板中添加了一个 div，其中包含我希望样式生效的 mat 字段周围的类。

【讨论】：