覆盖只读/禁用样式/CSS答案

【问题标题】：Override Readonly/Disable Styling/CSS覆盖只读/禁用样式/CSS
【发布时间】：2021-02-24 07:15:25
【问题描述】：

禁用输入字段时覆盖材料设计样式的正确/最佳方法是什么？

开箱即用

我能够使用以下 css 实现我的目标，但这是一种有效的方式吗？好像我在搞乱Angular Material的内部。有没有更好的办法？

// override material design input field styling for readonly mode
.mat-form-field-disabled .mat-form-field-underline {
    height: 0;
}

.mat-input-element:disabled {
    color: $header-text-color;
}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

是的，这种方式是正确的，您可以将自定义 CSS 规则添加到来自 mat-input 的任何元素，使用 disabled 类或类似的东西。

但是您应该知道 Angular 材质适用于哪些元素和哪些类（在您的情况下，适用于禁用的输入）。有了这些知识，您就可以轻松实现目标。

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

【讨论】：

【解决方案2】：

看起来你想要只读的。只读和禁用是两个不同的东西。如果您想要只读，请使用<input readonly="true">。

【讨论】：

谢谢，对我帮助很大。

【解决方案3】：

我给表单域添加了一个新类，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;
        }
      }
    }
  }
}

【讨论】：