Angular Material mat-select underline color change in Angular application

I'm new to Angular Material, so I may be missing something, but I would appreciate any help on this case. My goal is to change the default blue underline of mat-select tag to white color while it is on focus. I managed to deal with this by adding this code to global styles file of my project:

.mat-select-value, .mat-select-arrow{
color: #fff !important;
}

.mat-form-field-infix{
border-bottom: 2px solid lightgrey !important;
}

.mat-focused .mat-form-field-underline .mat-form-field-ripple{
background: none;
}


You can see how it looks here (language selection dropdown list in top left corner).

After that I realized, that i will need some more mat-select tags in another components, but the underline this time should not be white, but black. Thats why I need my problem to be solved by changing component styles, but still nothing works for me. So far I tried to use !important to reset Angular Material attributes, ng-deep and switching encapsulation mode to "None".

I also inspected this issue with similar problem, but it seem a bit outdated and after my rework still didn't work for me.

This is the html template, that i'm using

<div id="languageDropDown">
<mat-form-field id="languageSelector">
<mat-select [(ngModel)]="language" name="languageSelector" id="languageSelector" (selectionChange)="languageChanged()">
<mat-option value="en" selected="selected" >EN</mat-option>
<mat-option value="ua">UA</mat-option>
</mat-select>
</mat-form-field>
</div>


I am using: @angular/material@6.3.1, Angular: 6.0.6

Continue reading...