Question

我正在与一个希望在整个项目中使用Angular Material的自由客户一起工作。但是，他们不喜欢下划线在角形材料输入中的外观。我尝试了多种方法来更改此设置，但尚未获得任何成功。

说实话，我什至无法在DOM中找到可以更改边框的标签。

Here是Angular Material文档，您可以看到所有可用的选项至少都有某种形式的底部边框。

我尝试过的一些方法：

任何有关此主题的帮助或意见，将不胜感激。

作为参考，客户说，任何偏离所需设计的更改都将被拒绝。所以我必须让它工作。我相信我也许可以游说来构建自定义输入组件作为解决方案，但是我知道它们已经死定在Angular Material上了。

编辑。添加了所需外观的图片：

Answer 1

这个小代码对我有用。我不想显示它，只是将高度和宽度设置为0。

::ng-deep .mat-form-field-underline{
height:0 !important;
width:0  !important;
}

但是，我认为很难对Angular Material Components进行样式设置，对我而言有时构建自己的样式更好。

Answer 2

首先，您需要在默认theme.scss内或在main.scss中导入材料样式表之后导入.scss。

现在，Material提供了一种选项，可以通过覆盖在Material文件夹中某个位置找到的@mixins来自定义颜色和某些样式（我之前没有该文件夹。模糊的指向...）。

返回到新添加的文件；您可以通过检查某些类的DOM，然后将它们添加到具有所需更改的文件中来覆盖材质的默认样式。由于文件是在Material之后加载的，因此默认样式会被覆盖。您选择覆盖的@mixin同样适用。只需查看文件，然后复制粘贴整个@mixin并进行相应的更改。

现在，如果您想走得更远，我和我的同事们都拥有一个使用Material BUT的自定义库，整个样式被剥离，剩下的是在mat-form-group组中输入bear，然后使用{{1 }}，上方有<input disabled/>。这样一来，您无需使用材料样式即可从材料中受益。