如何自定义处于禁用状态的 mat-form-field [英] How Can I customize mat-form-field in disabled state

问题描述

我正在尝试自定义有角度的材料 mat-form-field :我能够使用以下方法自定义下划线边框:

I am trying to customize the angular material mat-form-field : I was able to customize the underline border using :

::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}

现在我正在尝试将禁用状态下的下划线边框自定义为实线而不是虚线:

now I am trying to customize the underline border in the disabled state to be solid instead of the dashed line :

我试过了，但它对下划线不起作用:

I tried this but it didn't work for underline :

::ng-deep.mat-form-field-disabled
 {

 }

我希望它在禁用状态下为灰色实心

I want this to be gray solid in disabled state

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

推荐答案

This Fixed it :

This Fixed it :

 ::ng-deep.mat-form-field-disabled .mat-form-field-underline 
    { 
    background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0 ) !important; 
    background-size: 1px 100% !important;
     background-repeat: repeat-x !important; 
    } 

这篇关于如何自定义处于禁用状态的 mat-form-field的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！