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

Question

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

我有一些带有轮廓外观输入的垫子表单字段。我想更改轮廓的边框半径（增加它）。

我阅读了此 stackoverflow：How to remove theoutline mat-form-filed bordercorner radius。

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

我不想使用封装。我用起来没问题::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