有没有办法像这样设置 Angular Material Tabs 的样式？

Question

我正在尝试像这样设计我的垫子标签

但是我在丢失当前选定选项卡下的白色边框时遇到了一些问题。向 mat-tab-label-active（使用 ::ng-deep）添加底部边框仍然会使某些 mat-tab-labels 的红色边框可见，即使我将 z-index 应用于活动选项卡。这可能吗？ 请参阅下面的当前代码

::ng-deep {
    .mat-tab-label-active {
        background: $white;
        border-top: 0.25em solid $carmine;
        border-right: 0.25em solid $carmine;
        border-left: 0.25em solid $carmine;
        border-bottom: 0.1em solid $white;
        z-index: 100;
    }
    .mat-tab-labels {
        border-bottom: 0.25em solid $carmine;

    }
    .mat-tab-group.mat-primary .mat-ink-bar, {
        background-color: $white;
    }
}

更新： StackBlitz 第一个选项卡仍显示容器背景颜色。我也在努力停止选项卡之间转换的动画，因为所选选项卡在被红色边框封装之前变成白色

Answer 1

试试这个：

::ng-deep {
  .mat-tab-label-active {
    background: white;
  }

  .mat-tab-labels {
    border-bottom: 2px solid crimson;
  }

  .mat-tab-group.mat-primary .mat-ink-bar {
    background-color: transparent;
    box-sizing: border-box;
    border-top: 2px solid crimson;
    border-left: 2px solid crimson;
    border-right: 2px solid crimson;
    border-bottom: 2px solid white;
    height: 50px;
  }

  .mat-tab-nav-bar, .mat-tab-header {
    border-bottom: none;
  }
}

https://angular-qmkyep.stackblitz.io/

Stackblitz