删除选项卡组的底部边框

Question

我要删除选项卡组的底部边框，该边框在下图中为灰色。

以下是显示代码的示例项目：

https://stackblitz.com/edit/angular-tabs-remove-bottom-border

Answer 1

可以在.mat-tab-header类上找到边框。

在main.css文件（或main.scss，styles.css或styles.scss）中，您可以全局定义

.remove-border-bottom .mat-tab-header {
    border-bottom: none;
}

然后在您的HTML文件中，给mat-tab-group一个类。

<mat-tab-group class="remove-border-bottom">
    <!-- ... -->
</mat-tab-group>

由于封装，如果要在component.scss文件中定义样式，则必须使用::ng-deep：

.remove-border-bottom ::ng-deep .mat-tab-header {
    border-bottom: none;
}

Answer 2

使用它并选择您的背景颜色：

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: white; // add styles properties here
}