如何局部覆盖Angular的.mat-mdc-form-field-error-wrapper类调整错误提示位置？

要避免全局修改.mat-mdc-form-field-error-wrapper影响所有错误提示，你可以通过限定样式作用范围的方式实现局部调整，以下是几种简单可行的方案：

方案1：给目标表单字段添加自定义类 #

在需要调整的<mat-form-field>上添加一个自定义类，比如custom-error-offset，然后通过嵌套选择器精准覆盖样式，无需!important（优先级足够）。

HTML代码： #

<!-- 需要调整错误位置的表单字段 -->
<mat-form-field class="custom-error-offset">
  <mat-label>示例输入</mat-label>
  <input matInput [formControl]="exampleControl">
  <mat-error>{{error}}</mat-error>
</mat-form-field>

<!-- 其他不受影响的表单字段 -->
<mat-form-field>
  <mat-label>正常输入</mat-label>
  <input matInput [formControl]="normalControl">
  <mat-error>{{normalError}}</mat-error>
</mat-form-field>

CSS代码： #

/* 仅作用于带有custom-error-offset类的表单内的错误提示 */
.custom-error-offset .mat-mdc-form-field-error-wrapper {
  left: -210px;
}

方案2：针对组件内的特定控件调整（Angular视图封装） #

如果仅在单个组件内需要调整，直接在组件的styles中编写样式，利用Angular默认的视图封装（Emulated）自动添加组件隔离前缀，样式只会作用于当前组件内的目标控件。

组件HTML中给<mat-form-field>加类后，组件CSS代码：

/* 仅当前组件内生效 */
:host .custom-error-offset .mat-mdc-form-field-error-wrapper {
  left: -210px;
}

:host表示样式作用于当前组件的宿主元素，确保样式不会泄漏到外部组件。

方案3：动态控制（针对特殊场景） #

如果需要根据条件动态调整错误位置，可以结合[ngClass]给表单字段添加类：

<mat-form-field [ngClass]="{'custom-error-offset': shouldAdjustError}">
  <!-- 表单内容 -->
</mat-form-field>

配合对应的CSS样式后，只有当shouldAdjustError为true时，错误提示才会应用偏移。

内容的提问来源于stack exchange，提问作者Mark