Angular Material中mat-error设置边距后不占独立空间问题

Angular Material 的 mat-form-field 组件对错误提示区域做了封装布局：
mat-error 外层包裹着类名为 .mat-form-field-subscript-wrapper 的容器，该容器默认采用绝对定位固定在输入框下方，高度为组件预设的固定值，内部内容溢出会被直接裁切。
直接给内部 mat-error 添加 margin、padding 样式，虽然能成功挂载到DOM元素上，但无法撑开外层固定定位+固定高度的父容器，所有添加的间距都会被父容器裁切，因此不会产生视觉上的位移。

不要单独修改 mat-error 元素的盒模型样式，先解除外层容器的布局限制，再调整间距：

• 全局统一调整的话，Angular项目可使用 ::ng-deep 穿透组件样式隔离，参考代码如下：

/* 给表单字段本身预留足够的底部空间，避免错误提示和下方内容重叠 */
::ng-deep .mat-form-field {
  margin-bottom: 24px;
}
/* 解除底部提示容器的绝对定位，让它占据正常文档流空间 */
::ng-deep .mat-form-field-subscript-wrapper {
  position: static !important;
  margin-top: 6px; /* 该值控制错误提示和输入框下边缘的间距 */
}

• 如果只需要调整单个表单的错误提示间距，给对应的 mat-form-field 标签添加自定义类（例如 class="custom-error-space"），再针对该类编写覆盖样式即可，避免影响全局表单样式。

注意：如果使用的是Angular Material 15及以上的MDC版本，外层容器的类名是 .mat-mdc-form-field-subscript-wrapper，将上述代码中的类名替换为对应版本的类名即可生效。

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