我在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也会拾取这些颜色变化。
如何控制特定元素的这种情况?
1条答案
按热度按时间vmdwslir1#
我解决了这个问题,从css到scss,在css周围放一个“.custom-mat”,并在模板中添加一个div,其中包含我希望样式产生效果的mat字段周围的类。