Angular 15中自定义mat-form-field边框样式及布局问题求助

希望实现自定义设计的mat-form-field效果，但Angular 15输出样式不符合预期，现有代码如下：

<div class="form-field-container">
   <h3>Email</h3>
   <mat-form-field appearance="outline">
      <input matInput type="email" id="Email" name="Email" formControlName="email" />
   </mat-form-field>
</div>

遇到的问题：

• 边框仍为圆角，颜色未按需求修改
• 自动完成时背景异常
• 输入框高度无法调整（需缩小10px），文本未垂直居中
• 已尝试以下CSS但未生效：

.input {
  background-color: #E5ECF5 !important;
  color: #001050 !important;
  letter-spacing: 0.05em;
}

.mdc-text-field {
  font-size: 12px;
  font-weight: 500;
  color: #001080 !important;
  background-color: #E5ECF6 !important;
  border-radius: 0px !important;
  letter-spacing: 0.05em;
}

.mat-mdc-form-field-appearance-outline {
  border-color: #001050 !important;
  border-radius: 0px !important;
}

.mat-form-field-outline-start,
.mat-form-field-outline-end {
  border-radius: 0 !important;
  border-color: #001080 !important;
}

.mat-mdc-form-field-error-wrapper {
  padding: 0px !important;
  margin: 0px !important;
  font-size: 9px;
  font-family: 'Roboto';
  font-weight: 600;
  text-transform: uppercase;
}

DOM相关类：

mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align ng-tns-c24-4
mat-mdc-form-field-error mat-mdc-form-field-bottom-align ng-tns-c24-4 ng-star-inserted
mat-mdc-form-field-error-wrapper ng-tns-c24-4 ng-trigger ng-trigger-transitionMessages ng-star-inserted

mat-mdc-form-field ng-tns-c24-4 mat-mdc-form-field-type-mat-input mat-form-field-appearance-outline mat-primary ng-pristine ng-invalid ng-star-inserted mat-form-field-invalid ng-touched

针对Angular Material 15的MDC组件特性，需要穿透组件封装的样式（使用:host ::ng-deep），以下是针对性修复代码：

1. 去除圆角、修改边框颜色 #

:host ::ng-deep .mat-mdc-form-field-appearance-outline .mdc-notched-outline__leading,
:host ::ng-deep .mat-mdc-form-field-appearance-outline .mdc-notched-outline__trailing {
  border-radius: 0 !important;
  border-color: #001080 !important;
}

:host ::ng-deep .mat-mdc-form-field-appearance-outline .mdc-notched-outline__notch {
  border-color: #001080 !important;
}

说明：Angular 15的outline样式使用mdc-notched-outline__leading/trailing/notch类控制边框，原代码中的类名已过时，需替换为MDC对应类。

2. 调整输入框高度、文本垂直居中 #

:host ::ng-deep .mat-mdc-form-field {
  --mat-mdc-form-field-container-height: calc(48px - 10px) !important; /* 默认高度48px，减去10px */
}

:host ::ng-deep .mdc-text-field__input {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 12px;
  font-weight: 500;
  color: #001080 !important;
  letter-spacing: 0.05em;
}

:host ::ng-deep .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
  padding: 0.5em 0 !important; /* 调整内边距适配高度 */
  min-height: auto !important;
}

说明：通过修改--mat-mdc-form-field-container-height变量直接控制容器高度，同时调整输入框内边距和对齐方式实现文本垂直居中。

3. 修复自动完成背景异常 #

:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: #E5ECF6 !important;
}

/* 处理自动完成弹出后的输入框背景 */
:host ::ng-deep .mdc-text-field--focused:not(.mdc-text-field--disabled) {
  background-color: #E5ECF6 !important;
}

/* 输入框本身的背景 */
:host ::ng-deep .mat-mdc-input-element {
  background-color: transparent !important; /* 让容器背景透出 */
}

说明：MDC的填充样式类控制背景，需覆盖聚焦和常态下的背景色，同时设置输入元素为透明避免层级覆盖。

4. 优化错误提示样式 #

:host ::ng-deep .mat-mdc-form-field-error-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

:host ::ng-deep .mat-mdc-form-field-error {
  font-size: 9px;
  font-family: 'Roboto';
  font-weight: 600;
  text-transform: uppercase;
}

注意事项 #

• 确保CSS代码放在组件的样式文件中（而非全局样式），并使用:host ::ng-deep穿透组件封装，避免影响全局样式。
• 若使用ViewEncapsulation.None，可省略:host ::ng-deep，但不推荐，易造成样式污染。

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