如何删除轮廓 mat-form-filed 边框角半径

Question

我正在使用有角度的材料轮廓 mat-form-field 来设计一个表单。我得到了带有边框角半径的默认 mat-form-field 轮廓文本框视图。有什么办法可以去掉outline mat-form-field的边框角半径，转换成方形文本框视图。

我尝试使用以下内容更改角材料 mat-form-field 的默认样式，但它不起作用。

//css

.mat-form-field-appearance-outline .mat-form-field-outline-start 
.alignment{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

//html

<mat-form-field appearance="outline" [hideRequiredMarker]="true" 
class="alignment">
<mat-label>Email Address</mat-label>
<input type="text" matInput placeholder="Enter email address">
</mat-form-field>

我希望轮廓 mat-form-field 没有边框角半径文本框，就像方形文本框 mat-form-field 一样，但获得默认的轮廓 mat-form-field 视图。

Answer 1

素材 v7.3.4

.mat-form-field-outline-start, .mat-form-field-outline-end {
    border-radius: 0 !important;
}

Answer 2

这将删除边框半径

.alignment .mat-form-field-outline-start,
.alignment .mat-form-field-outline-end {
    border-radius: 0px !important;
}

但您需要将其放入顶级样式表（例如 styles.css）中，即添加到 angular.json 中的样式表，以便覆盖 Angular Material 组件样式。

Answer 3

这就是我删除边框半径的方法。

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0px !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 0px !important;
}