更改（增加）Mat-Form-Field的边框半径

Question

我正在使用 Material 在一个 Angular 项目中工作。

我有一些带外观轮廓的 mat-form-fields 输入框，我想改变轮廓的边框半径（增加它）。

我看过这个 stackoverflow：如何删除mat-form-filed边框圆角。

但是那些解决方案都不能让我正确地增加边框。 它接近了，但会在输入框左侧造成奇怪的东西：

我不想使用封装，只用 ::ng-deep 就可以了。

这里有一个 stackblitz 演示：https://stackblitz.com/edit/angular-9-material-starter-pp4349?file=src%2Fapp%2Fapp.component.css

- ineedtoknow

Answer 1

对于 Angular Material >= 16

你只需要覆盖一个 CSS 变量 --mdc-outlined-text-field-container-shape。

在全局样式表中，确保它在你的 Material 主题之后被引入：

.mdc-text-field--outlined {
  --mdc-outlined-text-field-container-shape: 28px !important;
}

或者直接在组件样式中：

:host ::ng-deep .mdc-text-field--outlined {
  --mdc-outlined-text-field-container-shape: 28px;
}

对于Angular Material <= 15

您需要增加左右轮廓的最小宽度，并对两侧应用适当的边框半径。

::ng-deep .mat-form-field-outline-start {
  border-radius: 28px 0 0 28px !important;
  min-width: 28px !important;
}

::ng-deep .mat-form-field-outline-end {
  border-radius: 0 28px 28px 0 !important;
  min-width: 28px !important;
}

/* Add padding to move the label and input into the center to prevent overlapping the rounded border */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0 32px !important;
}

https://stackblitz.com/edit/angular-9-material-starter-yjtz7l?file=src%2Fapp%2Fapp.component.css

---

免责声明

Angular强烈不建议并且不直接支持在主题API之外覆盖组件CSS。组件的DOM结构和CSS类被视为私有实现细节，可能随时更改。

来源：https://material.angular.io/guide/theming#style-customization-outside-the-theming-system

- Yannick Beauchamp-H

---

有一个更好的解决方案。请查看此链接，＃3“在单独的全局样式中覆盖AM样式-而不是作用域！”https://betterprogramming.pub/best-way-to-overwrite-angular-materials-styles-e38dc8b84962 - plutownium

请注意，这将破坏标签溢出效果。 - undefined

@RaphaëlBalet 我进行了编辑，修复了标签溢出时右边框的问题。为了防止这种情况发生，最小宽度必须应用于两侧。 - undefined

这在Angular 16中不起作用。 - undefined

@victorpacheco3107 我更新了关于Angular Material 16的答案。 - undefined