Angular 应用程序中 Angular Material mat-select 下划线颜色的更改

Question

Angular 应用程序中 Angular Material mat-select 下划线颜色的更改

6

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

我正在使用：@angular/material@6.3.1，Angular版本为：6.0.6。

- Aleksandr Romanov

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manuel Ridao · Answer 1

以下是对我有效的方法：

// 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元素时，Angular在某个地方覆盖了这个样式。

- YouBee · Answer 2

将此添加到您的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;

- AlanObject · Answer 3

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