Angular应用中的Angular Material垫选择下划线颜色更改

Question

我是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; 
}

您可以在此处看到外观（左上角的语言选择下拉列表）。

之后，我意识到，在其他组件中我将需要更多的垫选择标签，但是这次的下划线应该不是白色，而是黑色。这就是为什么我需要通过更改组件样式来解决我的问题，但是仍然没有任何效果适合我。到目前为止，我尝试使用！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>

我正在使用：@ angular / material @ 6.3.1，Angular：6.0.6

Answer 1

为什么不添加您自己的类并在 HTML 级别调用正确的类，而不是修改原始的 mat-* 类呢？

所以：

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

或者：

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

在组件的 CSS 中（如果您愿意，也可以在全局 CSS 中）：

.blackunderline {
     ...
 }

.whiteunderline {
     ...
 }