将不同的CSS应用于Mat表单字段

Question

我正在以角形形式使用垫子形式的字段。我想更改字段底部边框的颜色。因此我使用了以下CSS。

.mat-form-field-ripple {
    background-color: #fabacb!important;
} 

但是我想在满足特定条件时应用此CSS。如果不满足该条件，我想使用其他颜色。

.mat-form-field-ripple {
    background-color: #000000!important;
} 



  <mat-form-field appearance="fill">
                            <mat-label [ngClass]="{'css': condition}>Name{{ </mat-label>
                         <input></input>
                        </mat-form-field>

我尝试使用ngClass，但是它总是使我的颜色错误。请帮助

Answer 1

然后将您的[ngClass]="{'css': condition}放到mat-form-field

并且在css中写有条件

css .mat-form-field-ripple {
    background-color:  #fabacb!important;
}