Angular 15中如何缩小Mat Form Field尺寸及字体大小？

最省事的缩放方案（彻底避免错位） #

直接用 CSS transform: scale() 是最简单的解决方式，能整体缩小表单字段及内部字体，不会出现标签错位这类问题：

.example-container mat-form-field {
  width: 150px;
  /* 缩放比例按需调整，0.8代表缩小至原尺寸的80% */
  transform: scale(0.8);
  /* 调整缩放锚点，避免元素偏移 */
  transform-origin: left top;
}

为什么原有样式在 Stackblitz 中无效？ #

Angular 15 升级后，Material 组件切换到了 MDC（Material Design Components）架构，组件样式的封装性更强。你直接写 .mat-mdc-text-field-wrapper 这类选择器，在组件的局部 CSS 里会被样式封装机制隔离，无法生效。如果要在局部 CSS 里覆盖样式，需要用 ::ng-deep 穿透（或者把样式放到全局样式文件中）：

::ng-deep mat-form-field {
  width: 150px;
}

::ng-deep .mat-mdc-text-field-wrapper {
  height: 30px;
}

/* 同步调整标签字体和位置，解决错位问题 */
::ng-deep .mat-mdc-form-field-label {
  font-size: 12px;
  top: 20px;
}

::ng-deep .mat-mdc-select-trigger {
  font-size: 12px;
}

不过这种逐个调整样式的方式容易因组件内部结构变化再次出现错位，还是用 transform: scale() 更省心。

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