聚焦时更改 mat-select-arrow 和 mat-select-underline答案

【问题标题】：Change mat-select-arrow and mat-select-underline when focused聚焦时更改 mat-select-arrow 和 mat-select-underline
【发布时间】：2018-02-27 01:39:25
【问题描述】：

到目前为止，我已经尝试了很多不同的东西，例如：

/deep/ .mat-select:focus .mat-select-trigger .mat-select-arrow {
    color: #63961C;
}

/deep/ .mat-select:focus .mat-select-trigger .mat-select-underline {
    background-color: #63961C;
}

或者：

/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-arrow {
    color: #63961C;
}

/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-underline {
    background-color: #63961C;
}

更改选择旁边的小箭头和下划线。

例如，我做过

/deep/ .mat-input-container.mat-focused .mat-input-underline {
    background-color: #63961C;
}

对于输入的下划线，它工作正常（聚焦时变为绿色）。（是的 /deep/ 对这个项目很好，但如果我没记错的话，现在它已经被弃用了）

我设法“一直”更改它，但我想要的是仅在焦点上为绿色，并保持如果不集中则为灰色。

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案1】：

避免使用/deep/（阅读此documentation）。你应该使用ViewEncapsulation。

在您的 ts 文件中，将 ViewEncapsulation 设置为 None：

import { ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

.. 并将以下类添加到组件的 css 文件中：

/* to change arrow when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow {
    color: #63961C;
}

/* to change underline when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-underline {
    background-color: #63961C;
}

/* to change plceholder text when focused */
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
    color: #63961C;
}

/* to change selected item color in the select list */
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #63961C;
}

链接到working demo。

为了让 css 更短，

.mat-select:focus:not(.mat-select-disabled).mat-primary 
.mat-select-arrow , .mat-select-underline , .mat-select-trigger 
{
    color: #63961C;
}

/* to change selected item color in the select list */
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #63961C;
}

【讨论】：

完美运行，谢谢！如果我理解得很好，封装在 Angular 中默认设置为模拟？无论如何，我会在项目的其他部分摆脱这些 /deep/ 。
是的，默认是模拟的。是的，在你的项目中去掉/deep/、::ng-deep，这不是角度标准，将来可能会被贬值/删除。
我不明白它的好处。如果我们设置 ViewEncapsulation.None 那么所有的 CSS 样式都不会绑定到那个特定的组件。它将应用于整个项目中具有相同类名的所有元素。所以发生冲突的可能性会更大。那么这有什么好处呢？ @费萨尔

【解决方案2】：

将此添加到您的 style.css

    .mat-form-field.mat-focused .mat-form-field-ripple{
        background-color: blue;
    }
    .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
        color: blue;
    }    
    .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
        color: blue;
    }

【讨论】：

我更喜欢这个答案，因为这样您就不会失去 ViewEncapsulation 的好处。

【解决方案3】：

对于角度材料 2 并为我必须设置的输入设置下划线：

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

【讨论】：