如何去除Angular Material 3中mat-tab-group的水平分隔线？

这条分隔线是Material 3的默认样式，并非通过mat-divider组件实现，而是由组件内部的伪元素或边框样式生成。可以通过以下两种方式去除：

方法1：使用Material 3内置CSS变量 #

直接在组件样式或全局样式中覆盖对应的CSS变量：

.mat-mdc-tab-group {
  /* 将分隔线高度设为0，直接隐藏 */
  --mdc-tab-divider-height: 0;
  /* 也可以设置颜色为透明作为备选 */
  --mdc-tab-divider-color: transparent;
}

方法2：自定义CSS选择器覆盖样式 #

如果变量不生效，可直接定位到生成分隔线的元素（通常是.mdc-tab-scroller__scroll-content的伪元素），强制隐藏：

.mat-mdc-tab-group .mdc-tab-scroller__scroll-content:after {
  display: none;
  /* 或者设置高度为0 */
  /* height: 0; */
}

注意：如果使用组件样式（非全局样式），可能需要添加::ng-deep来穿透组件封装（Angular 17+中也可以通过设置encapsulation: ViewEncapsulation.None，但推荐优先使用::ng-deep配合:host限定作用域）：

:host ::ng-deep .mat-mdc-tab-group .mdc-tab-scroller__scroll-content:after {
  display: none;
}

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