Angular Material form-field 标签字体颜色和大小

Question

我正在尝试在 Angular Material 6 中，当表单域被输入文本填充并且焦​​点丢失时，使表单域的标题更大更暗。

感谢您的帮助

Answer 1

将此添加到您的全局 CSS 文件中style.scss：

.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label:not(.mat-empty):not(.mat-form-field-empty) {
  // color
  // scale or font-size
}

为了实现这一点，我简单地检查了元素，获取了它为空时的类，以及它不为空时的类，并相应地制作了选择器。

请记住在您的全局 CSS 文件中执行此操作，而不是在组件文件中，因为默认情况下组件的视图是封装的（这意味着样式也被封装了）并且不会应用该样式。