有条件地将 css 应用于 mat 表单字段 [英] Conditionally applying css to mat form field
问题描述
我正在开发一个 Angular 应用程序,并且在其中使用了 mat 表单字段.为了更改垫子表单字段底部边框的颜色,我使用的是为垫子表单字段内置的 mat-form-field-ripple css.CSS如下.
I am working on an angular application and I am using mat form fields in it. For changing color of botttom border of mat form field I am using mat-form-field-ripple css which is inbuilt for mat form field. CSS is as follows.
.mat-form-field-ripple {
background-color: #f9c940!important;
}
当我使用此 CSS 时,它会自动应用于所有表单字段.当一个条件为真时,我必须在 mat-form-filed-ripple 中应用 #f9c940 颜色,当另一个条件为真时应用不同的颜色.我的mat表单域代码如下:
When I use this CSS, it automatically gets applied to all form fields. I have to apply #f9c940 color in mat-form-filed-ripple in when one condition is true and a different color when another condition is true. My mat form field code is as follows:
<mat-form-field appearance="fill">
<mat-label [ngClass]="{}">Name</mat-label>
<input formControlName="Name" readonly>
</mat-form-field>
我试图使用 ngClass 来做到这一点,如上所示,但没有得到它.我该怎么做?
I was trying to do it using ngClass as shown above but not getting it. How can I do that?
推荐答案
只需创建自己的 CSS 类:
Just create your own CSS class:
.mat-form-field-ripple {
//your standard styling,
}
.myBackgroundColor {
background-color: #f9c940!important;
// add this selector below the .mat-form-field-ripple selector so that it will override..
}
然后有条件地将其应用于您的标签:
Then apply it conditionally to your label:
<mat-form-field appearance="fill">
<mat-label [ngClass]="{'myBackgroundColor': mycheck}">Name</mat-label>
<input formControlName="Name" readonly>
</mat-form-field>
在您的组件中,您有它基于的表达式:
In your component you have the expression it is based on:
mycheck = true; // you will modify this true to any expression that is transformable to a boolean. If true, your class is applied, if false then not..
这篇关于有条件地将 css 应用于 mat 表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!