如何减小MatFormField组件的圆角弧度？

针对你使用appearance="outline"的MatFormField组件，之前的方法无效是因为：

• Sass变量$small-component-radius需要集成到Angular Material的主题配置流程中，单独定义不会生效；
• 直接给mat-form-field设置border-radius没用，因为outline样式的边框是由内部的.mat-mdc-form-field-outline-start/.mat-mdc-form-field-outline-end等元素实现的。

下面提供两种可行方案：

方案一：通过Sass变量（推荐，符合Material设计规范） #

在你的自定义主题文件（比如theme.scss）中，正确配置shape参数并注入到主题中：

@use '@angular/material' as mat;
@use '@angular/material/shape' as shape;

// 定义自定义形状配置，修改small组件的圆角
$custom-shape-config: shape.define-shape-config(
  $small-component-radius: 0px, // 这里设置你需要的圆角值，比如0/2px
  $medium-component-radius: 4px, // 保持默认或按需修改
  $large-component-radius: 8px   // 保持默认或按需修改
);

// 生成主题时传入自定义形状配置
$custom-theme: mat.define-light-theme((
  color: mat.define-palette(mat.$indigo-palette), // 你的颜色配置
  typography: mat.define-typography-config(),    // 你的排版配置
  shape: $custom-shape-config
));

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

方案二：纯CSS覆盖（快速生效，无需修改主题） #

如果不想改动主题配置，可以直接在全局样式文件（比如styles.css/styles.scss）中添加以下样式：

/* 设置为2px圆角 */
mat-form-field[appearance="outline"] .mat-mdc-form-field-outline-start,
mat-form-field[appearance="outline"] .mat-mdc-form-field-outline-end {
  border-radius: 2px !important;
}

/* 如果需要完全直角，替换为下面的代码 */
/*
mat-form-field[appearance="outline"] .mat-mdc-form-field-outline-start,
mat-form-field[appearance="outline"] .mat-mdc-form-field-outline-end {
  border-radius: 0 !important;
}
*/

注意：如果你的项目使用了ViewEncapsulation，可能需要在组件样式中使用:host ::ng-deep前缀（不过推荐优先使用全局样式或主题变量方案）。

内容的提问来源于stack exchange，提问作者Samoth