Changing the ripple color of a mat-input

Issue

I've been struggling for a while now on how to manually change the ripple color of a <mat-input> element and I can't seem to get it to work in any way.

<input matInput
       type="number"
       (keydown)="updateManualPage(1)"
       placeholder="Filter"
       formControlName="filterParam1">

I've tried everything I could think of in the CSS, .mat-form-field-underline, .mat-form-field-ripple, including a giant block of classes I've shamelessly ripped out of another SO question/answer, using ::after and ::before selectors, trying to use ::ng-deep, !important but nothing seems to change the color of the ripple from the blue one that is imported from @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

EDIT: Just read the API a bit better, so I found out that the border color that appears after the ripple is from the <mat-form-field> element, which has a color picker. However, that color picker can only have a value of 'primary', 'accent', and 'warn'. So now I'm wondering how it would be possible to insert a custom color.

Solution

Here is a alternative without using ::ng-deep since it causes warnings during build.

css

.mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: red !important;
}

.mat-form-field.mat-focused .mat-form-field-label {
  color: red !important;
}

or

.custom-ripple .mat-form-field.mat-focused .mat-form-field-label {
  color: red !important;
}

.custom-ripple .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: red !important;
}

html

<div class="custom-ripple">
  <mat-form-field appearance="fill">
    <mat-label>Outline form field</mat-label>
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <input matInput placeholder="Favorite food" value="Sushi" />
  </mat-form-field>
</div>
<app-form-field></app-form-field>

stackblitz

Answered By - Naren Murali