css - 如何自定义 Angular Material Input 中的样式？

Question

我正在与一位自由客户合作，他希望在整个元素中使用 Angular Material。但是，他们不喜欢下划线在 Angular Material 输入中的样子。我尝试了多种方法来改变这一点，但我还没有找到任何成功的方法。

老实说，我什至无法在 DOM 中找到可以让我更改该边框的标记。

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

我尝试过的一些方法:

• > This one来自旧的 Angular Material ，不再适用于新的 Angular Material
• 接受的答案 here用于新的 Angular Material ，但我无法让它工作。我完全按照描述实现并且没有更改样式。
• > This approach看起来它会工作。不幸的是，我也无法让它工作。

如果您对此主题有任何帮助或意见，我们将不胜感激。

作为引用，客户表示任何偏离预期设计的更改都将被拒绝。所以我必须让它工作。我相信我可能会游说构建一个自定义输入组件作为解决方案，但我知道他们对 Angular Material 已经死心塌地了。

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

Answer 1

这段小代码帮我做了。我不想显示它，只是将高度和宽度设置为 0。

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

但是我认为为 Angular Material Components 设计样式有点困难，对我来说有时构建我自己的更好。