改变（增加）Mat-Form-Field 的边界半径

Question

我正在使用 Material.

的 Angular 11 项目工作

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

我阅读了这个计算器：How to remove the outline mat-form-filed border corner radius .

但是 none 这些解决方案允许我正确地增加边界。它已经接近了，但是它在输入的左侧导致了一件奇怪的事情：

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

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

Answer 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

改变（增加）Mat-Form-Field 的边界半径

Change (Increase) Border Radius of Mat-Form-Field

css

angular

sass

angular-material

angular11