What class determines the mat-form-field underline color?

In angular material, the mat form field that contains an input element takes a default color and i want to override that color for the text and underline.

I am able to change the text color with the below code in scss file.

::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
color: #8626C3 !important;
}


But not able to locate the underline element from inspect window. Also, i found the class mdc-line-ripple that highlights the underline element. Because,

::ng-deep .mdc-line-ripple {
display : none
}


makes the underline disappear.

I tried doing the below

::ng-deep .mat-form-field-ripple {
color: #8626C3 !important;
}


Despite trying color, background, background-color properties, there is no effect on the said element.

Continue reading...