有条件地将CSS应用于Mat表单字段 [英] Conditionally applying css to mat form field

问题描述

我正在开发一个有角度的应用程序，并且正在其中使用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颜色，而当另一个条件为真时，则要应用其他颜色.我的垫子形式域代码如下:

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屋！