Angular Material 16表单字段边框移除、颜色修改及自定义求助

别放弃Angular Material #

16版本基于MDC的重构是官方为提升组件兼容性、可维护性的长期规划，后续版本都会基于该架构迭代，适应后能获得更稳定的组件体验，没必要直接放弃。

问题原因 #

你之前修改的.mat-form-field-outline在MDC架构下被新的DOM结构替代，直接修改.mdc-notched-outline会因为该元素的层级和布局特性，遮挡输入框内容并破坏原有间距。

正确样式调整方案 #

针对轮廓型表单（appearance="outline"），应该给包裹输入内容的容器添加背景，而非修改外轮廓元素：

方案1：隐藏原有轮廓，用输入容器背景替代

::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
  padding-bottom: 0; /* 可选，调整底部多余间距 */
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0.75em 0.5em; /* 调整内边距适配背景 */
  background-color: #f5f5f5;
  border-radius: 5px;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  opacity: 0; /* 隐藏原有轮廓 */
}

方案2：保留聚焦轮廓效果

如果需要保留输入框聚焦时的轮廓提示，可调整为：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
  padding-bottom: 0;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0.75em 0.5em;
  background-color: #f5f5f5;
  border-radius: 5px;
  position: relative;
  z-index: 1; /* 确保输入内容在轮廓上层 */
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  border-radius: 5px;
}

/* 自定义聚焦时的轮廓颜色 */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: #1976d2;
}

额外提示 #

• 尽量避免使用!important，通过调整选择器优先级覆盖默认样式更稳妥。
• 若要全局生效，可将样式写在全局styles.scss中，无需添加::ng-deep。
• 推荐使用Angular Material的自定义主题统一配置样式，减少零散CSS修改，比如在主题中定义表单的背景色、轮廓色等。

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