Multi tool use

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

1 Answer
1

Instead of modifying the original mat-* classes why not add your own classes and invoke the proper one at the HTML level?

So:

<mat-form-field class="blackunderline" id="languageSelector"> .. </mat-form-field>


Or:

<mat-form-field class="whiteunderline" id="languageSelector"> .. </mat-form-field>


And in your component's CSS (or global CSS if you prefer):

.blackunderline {
...
}

.whiteunderline {
...
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.