问题原因是由于mat-form-field的内部border属性与浏览器默认样式发生冲突引起。在CSS中为mat-form-field设置如下样式即可去除内部边框线:
::ng-deep .mat-form-field-underline, .mat-form-field-ripple {
display: none;
}
其中 ::ng-deep 是Angular提供的一种给组件内部样式设置全局作用域的方式。
在HTML中使用如下代码即可实现:
在CSS中添加以上样式即可去掉边框线。