角度垫错误不占用自己的空间

Question

我有一个包含垫子错误的表格，我正在尝试将其排除。我知道我可以简单地分隔表单字段本身，但我一直在尝试向

mat-error

元素添加边距/填充/边框，它们都被应用，但它们不会移动。

就 CSS 而言，我已经尝试了我能想到的大多数方法来强制它移动。样式已应用，但实际上没有任何变化。

  mat-error{
    display: block !important;
    position: relative !important;
    margin-bottom: 40px !important;
    padding-bottom: 40px !important;
    z-index: 999;
  }

为什么会出现这种情况？

Answer 1

1. 将 css 更改为 class：

   .mat-error

   而不是

   mat-error

   。

2. 为了更改角度材质中的样式，您应该定义一个全局样式表，该样式表在 angular.json 配置文件的 styles 数组中声明。并自定义其中的所有垫子样式。

在 Styles.css 中：

.mat-error {
    color: aqua;
}

结果将是：

请阅读自定义 Angular Material 组件样式文章以获得更好的解释。

Answer 2

我也有同样的问题。这是一件麻烦事，但我可以通过增加这些类的边距和填充来做到这一点：

.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0.25em 0 1.2em 0 !important;
}
.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
  padding: 0 0.5em !important;
}

Answer 3

我也有同样的问题。

我无法编辑 mat-error 周围的间距。

我已经尝试过了

.mat-mdc-form-field-error-wrapper {
  margin: 0 16px 10px 16px !important;
}

但是没用