覆盖只读/禁用样式/CSS

是的,这种方法是正确的,您只需将自定义CSS规则添加到 mat-input 具有 disabled 阶级或类似的东西。

但您应该知道,何时、对哪些元素以及角度材质应用的类别(在您的情况下,对于禁用的输入)。有了这些知识,你可以轻松实现你的目标。

::ng-deep 和 !important 有时我可以建议的另一件事是缩小目标元素的范围,排除影响您不想影响的其他元素。

看起来您想要只读。只读和禁用是两件不同的事情。如果要只读,请使用 <input readonly="true"> 。

我给了我的表单字段一个新的类, mat-form-field-readonly 。

<mat-form-field appearance="outline" class="mat-form-field-readonly">
    <mat-label class="control-label text-dark">Name</mat-label>
    <input matInput type="text" formControlName="name" [readonly]="true"/>
</mat-form-field>

在 myform.component.scss 文件

::ng-deep .mat-form-field-readonly {
  .mat-form-field-wrapper {
    .mat-form-field-flex {
      .mat-form-field-outline {
        .mat-form-field-outline-start {
          background-color: rgba(127, 127, 127, 0.25) !important;
        }

        .mat-form-field-outline-gap {
          background-color: rgba(127, 127, 127, 0.25) !important;
        }

        .mat-form-field-outline-end {
          background-color: rgba(127, 127, 127, 0.25) !important;
        }
      }
    }
  }
}