angular - 如何自定义处于禁用状态的 mat-form-field

标签 angular angular-material angular7 angular-material-7

我正在尝试自定义 Angular Material mat-form-field :
我能够使用以下方法自定义下划线边框:

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

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

我试过这个,但它对下划线不起作用:
::ng-deep.mat-form-field-disabled
 {

 }

enter image description here

我希望它在禁用状态下呈灰色实心
 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

最佳答案

这修复了它:

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

关于angular - 如何自定义处于禁用状态的 mat-form-field,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54355907/

相关文章:

Angular 7 Windows 身份验证登录弹出窗口未显示

Angular 7+,从父组件调用子组件的方法好吗?

css - 跨应用程序的自定义媒体查询

javascript - angular 2 Material 输入默认焦点移除

javascript - Ionic 3 减少启动时间

angular - 两个没有父子关系的组件如何通信?

angular-material - 在角度 Material 设计中的工具栏下方设置sidenav?

javascript - 在 angular/angularjs 混合应用程序中将 downgradeModule 与 downgradeInjectable 结合使用会导致错误

javascript - Angular ReactiveForms FormArray removeAt 移除FormArray中的所有元素

angular - 如何强制 Angular 7+ Material Autocomplete 输入仅由数据源提供的字母?