材质选项卡-覆盖所选的选项卡边框

Question

我对Angular Material Tab组件具有这种样式（相当难看）。

https://stackblitz.com/edit/angular-aciwzg?file=src/styles.scss

我希望所选的活动标签没有border-bottom。

由于属于Tab的主体（.mat-tab-body-wrapper）而不是Tab本身的边框，因此这并不立即可见。

我认为我需要扩展标签内容的高度以隐藏底部边框。

我想要什么：

有人能分叉我的stackblitz并仅使用CSS来实现吗？

Answer 1

您必须使用一些技巧才能使这项工作

隐藏标签容器下内容的边框

为此：

• 移动底部内容包装器top: -1px

• 将底部边框添加到标签中，如下所示：border-bottom: 1px solid #fafafa;

• 删除选项卡容器的底部边框：border-bottom: none

这里更新了小提琴： https://angular-aciwzg-kjzfk6.stackblitz.io

更新的链接：https://stackblitz.com/edit/angular-aciwzg-kjzfk6?file=src/styles.scss