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

Question

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

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

我读过这个stackoverflow：如何删除轮廓垫表单字段边框角半径。

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

我不想使用封装。我很喜欢使用

::ng-deep

。

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

Answer 1

对于角度材料 >= 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;
}

对于有角度的材料

<= 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

Answer 2

实际上，在 Angular 15 上，我能找到的唯一解决方案如下：

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
    border-radius: 0 var(--mdc-shape-small, 12px) var(--mdc-shape-small, 12px) 0 !important;
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
    border-radius: var(--mdc-shape-small, 12px) 0 0 var(--mdc-shape-small, 12px) !important;
}