如何设置Angular Material标签的mat-ink-bar宽度匹配标签文本宽度

我之前也碰到过这个困扰，其实通过自定义CSS就能轻松实现让mat-ink-bar宽度和标签头部文本完全对齐的效果，下面是具体的实现步骤：

• 第一步：理清标签结构逻辑
  Angular Material的标签默认是让mat-tab-label容器占满分配的宽度，mat-ink-bar会继承这个容器的宽度，所以才会出现比文本宽的情况。我们需要让标签容器收缩到文本宽度，再让mat-ink-bar匹配这个收缩后的宽度。

• 第二步：添加组件级自定义样式
  在你的组件样式文件（比如your-component.component.scss）里加入以下代码：

  .mat-tab-group {
    .mat-tab-label {
      // 让标签容器宽度自适应文本
      width: auto !important;
      padding: 0 16px; // 可根据需求调整内边距，保证文本和ink-bar的间距
  
      .mat-ink-bar {
        // 让ink-bar宽度匹配文本宽度
        left: auto !important;
        right: auto !important;
        width: fit-content !important;
        margin: 0 auto; // 让ink-bar和文本居中对齐
      }
    }
  }
  

  这里的核心点：

  • 把mat-tab-label的宽度设为auto，让它收缩到文本的实际宽度
  • 给mat-ink-bar设置width: fit-content，同时取消固定的左右定位，用margin:0 auto让它和文本对齐

• 第三步：适配ViewEncapsulation（可选）
  如果你的组件开启了默认的ViewEncapsulation，样式可能无法穿透到Angular Material的组件内部，这时可以用::ng-deep来处理（不过建议优先用组件级样式，尽量少用::ng-deep）：

  ::ng-deep .mat-tab-group .mat-tab-label {
    width: auto !important;
    padding: 0 16px;
  
    .mat-ink-bar {
      left: auto !important;
      right: auto !important;
      width: fit-content !important;
      margin: 0 auto;
    }
  }
  

调整完之后，mat-ink-bar就会完全贴合标签头部文本的宽度，和你期望的效果一致啦！

内容的提问来源于stack exchange，提问作者nuwan.chamara