如何定制Angular Material Tab样式：选中蓝底、其余白底带连线

要实现选中标签蓝色背景、其余标签白色背景且标签间带连线的效果，你可以通过样式穿透修改Angular Material的默认样式，具体步骤如下：

1. 保留现有组件结构 #

你的基础代码可以保持不变：

<mat-tab-group>
  <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab>
</mat-tab-group>

2. 添加自定义样式 #

在组件的CSS/SCSS文件中添加以下样式（使用::ng-deep穿透Angular的视图封装，确保样式生效）：

::ng-deep {
  /* 移除标签栏默认的底部边框和背景 */
  .mat-tab-group.mat-primary .mat-tab-label-container {
    border-bottom: none;
    background-color: #fff;
  }

  /* 设置所有标签的默认样式：白色背景、文字颜色、内边距，以及标签间的竖线连线 */
  .mat-tab-label {
    background-color: #ffffff;
    color: #333333;
    padding: 0 24px;
    position: relative;

    /* 给除了最后一个标签之外的所有标签添加右侧竖线作为连线 */
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 10px;
      bottom: 10px;
      width: 1px;
      background-color: #e0e0e0;
    }
  }

  /* 设置选中标签的样式：蓝色背景、白色文字 */
  .mat-tab-label.mat-tab-label-active {
    background-color: #1976d2; /* 可自定义为你需要的蓝色 */
    color: #ffffff;
  }

  /* 移除选中标签默认的下划线指示器 */
  .mat-tab-group.mat-primary .mat-ink-bar {
    display: none;
  }
}

关键说明 #

• ::ng-deep：用于突破Angular的组件视图封装，让样式能作用到Angular Material的内部组件元素。如果你的项目禁用了::ng-deep，也可以将这些样式放到全局样式文件（如styles.scss）中。
• 标签间连线：通过伪元素::after给非最后一个标签添加右侧竖线，模拟标签间的分隔线，可自行调整竖线的颜色、高度。
• 选中状态样式：直接覆盖.mat-tab-label-active的背景色和文字色，同时移除默认的下划线指示器（.mat-ink-bar），避免与自定义背景样式冲突。

你可以根据设计需求调整蓝色背景色、连线颜色以及内边距等参数，匹配目标样式。

内容的提问来源于stack exchange，提问作者Rosy