更改（增加）Mat-Form-Field 的边界半径 [关闭]答案

【问题标题】：Change (Increase) Border Radius of Mat-Form-Field [closed]更改（增加）Mat-Form-Field 的边界半径 [关闭]
【发布时间】：2021-06-03 15:16:24
【问题描述】：

我正在使用 Material 的 Angular 11 项目。

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

我阅读了这个 stackoverflow：How to remove the outline mat-form-filed border corner radius。

但是这些解决方案都不允许我正确增加边框。它很接近，但它会在输入的左侧引起奇怪的事情：

我不想使用封装。我可以使用::ng-deep。

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

【问题讨论】：

标签： css angular sass angular-material angular11

【解决方案1】：

您需要增加左侧轮廓的最小宽度，并将边框半径仅应用于左侧或右侧。

::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;
}

https://stackblitz.com/edit/angular-9-material-starter-flnoeq?file=src/app/app.component.css

【讨论】：