如何移除Angular Material日期选择器的下划线

你的CSS代码不生效是因为选择器写法有误，&符号在::ng-deep块中的使用不符合规则，导致无法正确匹配目标元素。以下是修正后的可行方案：

方案一：修正选择器写法 #

直接调整选择器结构，确保能精准定位到日期选择器的下划线元素：

::ng-deep .mdc-line-ripple::after {
  border-bottom-style: none !important;
}

方案二：增加父元素限定（避免全局污染） #

如果担心全局样式被影响，可以结合mat-form-field的类名缩小作用范围：

::ng-deep mat-form-field .mdc-line-ripple::after {
  border-bottom-style: none !important;
}

方案三：直接隐藏下划线元素 #

如果上述方案仍不生效，可以尝试直接隐藏整个下划线容器：

::ng-deep .mdc-line-ripple {
  display: none !important;
}

关键说明 #

• ::ng-deep是Angular用于穿透视图封装的伪类，必须保留才能修改Angular Material组件的内部样式（除非你把组件的ViewEncapsulation设置为None，但不推荐）。
• 原代码中&.mdc-line-ripple的写法错误，&在这里代表父选择器::ng-deep，组合后会生成无效的选择器::ng-deep.mdc-line-ripple，无法匹配到目标元素。

内容的提问来源于stack exchange，提问作者Aabi