Changing color of mat form ripple conditionally

问题

I am working on a angular app. I am using mat-form-field as follows.

<mat-form-field appearance="fill">
    <mat-label id="title">{{ title }}
    </mat-label>
    <input formControlName="title" matInput id="title" (click)='updateValue("title")' readonly>
</mat-form-field>

I get a rectangle shaped form field with above code. When I hover over the bottom line of mat form field like when I take my mouse on bottom of a particular form field I want to change color. For it I am suing following CSS

.mat-form-field-ripple {
    background-color: #00798e;
}

It by defaults changes color of base of mat form field. The problem I am facing here is I want a different color in some other condition. For example, In my component I have a variable, If it's value is X then I want above color and if it's value is Y, then I want to apply a different ripple color. As mat-form-field-ripple seems to be in built property of mat form field, I am not able to change color at runtime. Whatever color I give in above code is applied in every condition. But I want different color in different conditions. How can I do that?

回答1:

You can bind the color of the HTML element to a variable. Something like:

<mat-form-field [style.background-color]="color">

And define the variable color in your .ts file

color: string = "red"

That way, whenever you change the value of variable color, the background color of the element should change as well.

来源：https://stackoverflow.com/questions/62664786/changing-color-of-mat-form-ripple-conditionally