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

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

之后我意识到，我将需要在另一个组件中添加更多 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/[email protected]，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;

Answer 2

这对我有用

// this is the underline when hovered
::ng-deep .mat-form-field-ripple {
  background-color: red !important;
}
// this is the normal
::ng-deep .mat-form-field-underline {
  background-color: red !important;
}

如果没有 ::ng-deep 或 !important，它就无法工作，我认为是因为在生成 html 和 css 元素时，角度会在某处覆盖此样式

Answer 3

与其修改原始的 mat-* 类，不如添加您自己的类并在 HTML 级别调用适当的类？

所以：

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

或：

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

在你的组件的 CSS（或者你喜欢的全局 CSS）中：

.blackunderline {
     ...
 }

.whiteunderline {
     ...
 }