angular - 删除选项卡组的底部边框

Question

我想删除下图中为灰色的选项卡组的底部边框。

这是一个显示代码的示例项目：

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

标签： angularangular-material2

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;
}