Is there a way to change the border color of a material form field in Angular when it is touched, focused, or active? I attempted to modify the color by overriding material css-class and also tried creating my own css class, but neither method had any effect on the element.
/*my.component.html*/
<mat-form-field class="matFormField">
<mat-label>Name</mat-label>
<input matInput [formControl]="name" required>
</mat-form-field>
/*my.component.css*/
.matFormField:focus {
border-color: green !important;
color: green;
}