Angular 覆盖只读/禁用样式/CSS

禁用输入字段时，替代材质设计样式的正确/最佳方法是什么

开箱即用

---

我能够通过以下css实现我的目标，但这是一种有效的方法吗？我好像在搞乱棱角材料的内部结构。有更好的办法吗

//覆盖只读模式的材质设计输入字段样式
.mat表单字段已禁用。mat表单字段下划线{
身高：0；
}
.mat输入元素：禁用{
颜色：$标题文本颜色；
}

---

是的，这种方法是正确的，您可以在禁用

类或类似的情况下，从
mat input
向任何元素添加自定义CSS规则

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

看起来您需要
：：ng deep
和
！有时很重要。我可以建议的另一件事是缩小目标元素的范围，排除影响您不想影响的其他元素。
看起来您想要只读。只读和禁用是两件不同的事情。如果您想要只读，请使用
我为表单字段提供了一个新类，
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>

谢谢，这对我帮助很大。
::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;
        }
      }
    }
  }
}