css 仅为特定的Angular 材质输入着色

ruoxqz4g  于 2022-12-01  发布在  Angular
关注(0)|答案(1)|浏览(118)

我在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也会拾取这些颜色变化。
如何控制特定元素的这种情况?

vmdwslir

vmdwslir1#

我解决了这个问题,从css到scss,在css周围放一个“.custom-mat”,并在模板中添加一个div,其中包含我希望样式产生效果的mat字段周围的类。

相关问题