如何为Angular中的mat-form-field设置border-radius样式？

问题代码 #

<mat-form-field class="new-inputs" style="border-radius: 10px;">
  <mat-label>Ime</mat-label>
  <input matInput type="text" maxlength="15"  id="firstName" formControlName="firstName" required
         [class.ng-invalid]="userData.get('firstName')?.invalid && userData.get('firstName')?.touched"
         [class.ng-touched]="userData.get('firstName')?.touched">
  <!-- <input matInput style="font-weight: normal">-->
</mat-form-field>

问题描述 #

我尝试修改mat-form-field的border-radius样式，但始终无法生效。我用的是未设置appearance属性的常规mat-form-field（默认是legacy外观），不确定这是不是问题原因。当前表单字段不符合设计规范，必须调整。

通过F12控制台修改时border-radius能正常改变，但除此之外我只能修改占位符的字体粗细（从粗体改成常规），以及背景色（虽有小问题但不影响使用）。我试过用已废弃的ng-deep，但还是解决不了问题。

问题原因 #

默认的legacy外观下，mat-form-field的可视边框并非由自身元素提供，而是由内部生成的.mat-form-field-outline、.mat-form-field-outline-start、.mat-form-field-outline-end等子元素构成。直接给mat-form-field设置border-radius只会作用于外层容器，无法影响实际显示的边框。

解决方案 #

方案1：针对legacy外观，用全局样式覆盖优先级 #

在项目全局样式文件（如styles.css）中添加以下代码：

/* 给整个outline设置圆角 */
.new-inputs.mat-form-field-appearance-legacy .mat-form-field-outline {
  border-radius: 10px !important;
}
/* 单独设置左右两端的圆角，避免出现衔接问题 */
.new-inputs.mat-form-field-appearance-legacy .mat-form-field-outline-start,
.new-inputs.mat-form-field-appearance-legacy .mat-form-field-outline-end {
  border-radius: 10px !important;
}

方案2：切换到更易自定义的外观（推荐） #

将mat-form-field的appearance属性改为fill或outline，这两种外观的结构更简单，样式自定义更直观：

修改HTML：

<mat-form-field class="new-inputs" appearance="fill">
  <mat-label>Ime</mat-label>
  <input matInput type="text" maxlength="15"  id="firstName" formControlName="firstName" required
         [class.ng-invalid]="userData.get('firstName')?.invalid && userData.get('firstName')?.touched"
         [class.ng-touched]="userData.get('firstName')?.touched">
</mat-form-field>

添加对应CSS（全局或组件内均可）：

.new-inputs.mat-form-field-appearance-fill .mat-form-field-wrapper {
  padding: 0;
  border-radius: 10px;
}
.new-inputs.mat-form-field-appearance-fill .mat-form-field-flex {
  border-radius: 10px;
}

方案3：组件内使用::ng-deep（临时方案，因ng-deep已废弃） #

如果必须在组件内样式中修改，可结合:host和::ng-deep提升样式优先级：

:host ::ng-deep .new-inputs.mat-form-field-appearance-legacy .mat-form-field-outline {
  border-radius: 10px !important;
}
:host ::ng-deep .new-inputs.mat-form-field-appearance-legacy .mat-form-field-outline-start,
:host ::ng-deep .new-inputs.mat-form-field-appearance-legacy .mat-form-field-outline-end {
  border-radius: 10px !important;
}

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