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（语言选择下拉列表在左上角）。

在那之后，我意识到，在其他组件中我将需要更多的垫选择标签，但是这次的下划线应该不是白色，而是黑色。这就是为什么我需要通过更改组件样式来解决我的问题，但是仍然没有任何效果适合我。到目前为止，我尝试使用！important重置Angular Material属性，ng-deep并将封装模式切换为“ None”。

我也对此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;

Answer 2

为什么不添加原始类并在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 {
     ...
 }

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

2 个答案: