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

Posted 2021-04-13

我正在使用角度材料轮廓mat-form-field来设计表单。我正在获取带有边角半径的默认mat-form-field轮廓文本框视图。有没有办法删除轮廓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视图。

答案

这将删除border-radius

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

但是你需要将它放在你的顶级样式表（例如styles.css）中，这是在angular.json中添加的样式表，以便覆盖Angular Material组件样式。

另一答案

材料v7.3.4

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

另一答案

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

::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;
}