Angular Material 表单字段标签字体颜色和大小

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 文件中执行此操作，而不是在组件的文件中执行此操作，因为默认情况下组件的 View 是封装的(这意味着样式也被封装)并且不会应用该样式。