如何在禁用状态下自定义 mat-form-field

Question

我正在尝试自定义 angular material mat-form-field ：我能够使用 :

自定义下划线边框

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

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

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

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

 }

我希望它在禁用状态下是灰色的

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

Answer 1

您需要定位以下 class:-

.mat-form-field-disabled .mat-form-field-underline

您要更改的 css 是：-

background-image: linear-gradient(to right,rgba(0,0,0,1) 0,rgba(0,0,0,.42) 33%,transparent 0);
background-size: 4px 100%;
background-repeat: repeat-x;

因此您可以 unset: all 重新开始或更新 background-size: 1px 100%; 或任何适合您需要的东西

Answer 2

这修复了它：

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

Answer 3

已修复：

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

Answer 4

你可以试试

::ng-deep .mat-form-field-disabled {
   .mat-input-element {
        color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-label {
        color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-underline {
         color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-ripple {
         color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-required-marker {
         color: rgba(0, 0, 0, 0.14);
    }

Answer 5

在 background-image 中不需要线性渐变。这对我有用：

::ng-deep .mat-form-field-disabled .mat-form-field-underline {
  background-color: #949494 !important;
  background-size: 1px 100% !important;
  background-repeat: repeat-x !important;
}

如何在禁用状态下自定义 mat-form-field

How Can I customize mat-form-field in disabled state

angular-material

angular

angular7

angular-material-7