如何自定义禁用状态下的 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>

- Ebram

---

嗨，你是如何解决那个问题的？ - Furqan S. Mahmoud

试试这个：https://dev59.com/NrHma4cB1Zd3GeqPKV1n#55912467 - Ebram

Answer 1

这解决了问题:

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

- Ebram

---

ng-deep已经被弃用了 :') https://dev59.com/8VYN5IYBdhLWcg3wuKC5 - Antoine Boisier-Michaud

Answer 2

你可以尝试。

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

- iugs88

Answer 3

你需要针对以下类进行定位：- .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%;或任何适合你的需求的内容。

- Web Nexus

---

我尝试了，但它没有起作用。 ::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%, transparent 0 ); background-size: 4px 100%; background-repeat: repeat-x; } - Ebram

将其添加到style.css中，不要使用ng-deep，并且您需要更改background-size。还可以尝试添加!important。 - Web Nexus

未生效 ---> .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%, transparent 0 ) !important; background-size: 4px 100% !important; background-repeat: repeat-x !important; } - Ebram

你的背景大小仍然是4像素，同时在类之间添加一个空格。 - Web Nexus

这个有效 --> ::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; } - Ebram

Answer 4

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

- Maxmark

Answer 5

::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline,
    .mat-input-element:disabled {
        color: red;

    }

这对我很有帮助，可以给文本和边框上色。

- Rafik Belkadi

Answer 6

这样就解决了：

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

- Ebram