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

Question

我有这个（相当丑陋的）Angular Material Tab 组件的样式。

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

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

由于边框属于 Tab 的 Body(.mat-tab-body-wrapper) 而不是 Tab 本身，因此这不是很明显。

我想我需要扩展标签内容的高度来隐藏底部边框。

我想要什么：

是否有人能够 fork 我的 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