Angular Material mat-select在Angular应用中下划线颜色变化

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

你可以看到它的样子here (左上角的语言选择下拉列表)。

之后我意识到，我将需要在另一个组件中添加一些 mat-select 标签，但这次的下划线不应该是白色的，而是黑色的。这就是为什么我需要通过更改组件样式来解决我的问题，但仍然对我不起作用。到目前为止，我尝试使用 !important 来重置 Angular Material 属性、ng-deep 并将封装模式切换为“无”。

我还检查了这个issue有类似的问题，但它似乎有点过时，在我返工后仍然对我不起作用。

这是我正在使用的 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

将此添加到您的 style.css

专注时

.mat-form-field.mat-focused .mat-form-field-ripple{
    background-color: red;
}

正常时

.mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: blue;