logo标签列表

如何去除mat-form-field的边框圆角？

angular-materialangular6angular-forms
11
我正在使用Angular Material的轮廓mat-form-field来设计一个表单。我得到了带有边角半径的默认mat-form-field轮廓文本框视图。是否有任何方法可以去除轮廓mat-form-field的边角半径并将其转换为正方形文本框视图。
我尝试使用以下方式更改Angular Material 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;
}

<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视图。

8个回答
9

Material v7.3.4

.mat-form-field-outline-start, .mat-form-field-outline-end {
    border-radius: 0 !important;
}
这会影响我的其他组件，有什么方法可以不使用ng deep来进行操作吗？ - user10126227
要仅影响一个字段，您可以将其放在类内部。 . my-class { .mat-form-field-outline-start，.mat-form-field-outline-end { border-radius：0！important; } } 类似这样的东西 - Abdul K Shahid
有一种更好的解决方案，不使用 !important。请参见此链接，＃3“在单独的全局样式中覆盖AM样式-而不是作用域！”https://betterprogramming.pub/best-way-to-overwrite-angular-materials-styles-e38dc8b84962 - plutownium
6

这将移除边框半径

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

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

5

这是我如何去掉边框半径。

::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;
}
在使用 Angular 8.1 时对我有效。 - JAAYBone
避免使用 ::ng-deep（已弃用）和避免使用 !important -- 这些不是良好的实践。jinavar1 的解决方案更可取。 - Tom Roggero
@TomRoggero 没有比 ng-deep 更好的替代方案... !important 只是为了特定性，你不能将其归类为好/坏实践。 - minigeek
这对我起作用了，而且没有使用!important。 - doubleya
3

我的解决方案和其他答案非常相似，但我真的不喜欢使用!important，所以我采取了以下措施（Material 9.1.0）:

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

移除边框并添加盒阴影：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
    border-radius: 50% !important;
    border: none;
    border-left: none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
    border-radius: 1px !important;
    border: none;
    border-right: none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
    border-radius: 1px !important;
    border-bottom: none;
}

::ng-deep.mat-form-field-appearance-outline .mat-form-field-outline {
    box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
    border-radius: 15px;
}
0

对于 Angular，如需删除 mat-card 的边框半径，请在您的 CSS 中添加以下内容

 mat-card{
    border-radius: 0px !important;
    }

你也可以添加类并为该类设置样式

0
我最终使用了以下代码，它对我起作用了：
::ng-deep  .no-line .mat-form-field-underline {
  display: none;
}
0

Angular v15和Material v15。要删除轮廓输入的半径：

 .mdc-text-field--outlined
   .mdc-notched-outline
   .mdc-notched-outline__leading {
   border-radius: 0;
 }

 .mdc-text-field--outlined
    .mdc-notched-outline
    .mdc-notched-outline__trailing {
    border-radius: 0;
 }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接