Я новичок в Angular Material, поэтому я могу что-то упустить, но я был бы признателен за любую помощь в этом деле.
Моя цель состоит в том, чтобы изменить стандартное синее подчеркивание тега mat-select на белый цвет, когда он в фокусе. Мне удалось справиться с этим, добавив этот код в файл глобальных стилей моего проекта:
.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;
}
Вы можете посмотреть, как это выглядит здесь (раскрывающийся список выбора языка в левом верхнем углу).
После этого я понял, что мне понадобятся дополнительные теги mat-select в других компонентах, но подчеркивание на этот раз должно быть не белым, а черным. Вот почему мне нужно, чтобы моя проблема была решена путем изменения стилей компонентов, но все равно у меня ничего не работает. До сих пор я пытался использовать! Important для сброса атрибутов Angular Material, ng-deep и переключения режима инкапсуляции на «None».
Я также проверил эту проблему с похожей проблемой, но она кажется немного устаревшей и после моей переделки все еще не работает для меня.
Это HTML-шаблон, который я использую
<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>
Я использую: @ угловой / материал @ 6.3.1, угловой: 6.0.6