Angular 6中无法修改MatTabs标签页高度与样式求助

嘿，我完全懂你现在的烦恼——刚接触Angular、CSS和HTML，想用MatTabsModule做标签页，结果发现默认样式根本改不了，比如高度、背景这些属性，确实让人头大。别慌，这主要是因为Angular的**视图封装（View Encapsulation）**在起作用，它会给组件样式加独特的属性，阻止外部样式干扰，反过来也让我们很难直接修改Material组件的默认样式。下面给你几个实用的解决办法：

方法1：用::ng-deep穿透样式（最快捷的临时方案） #

::ng-deep可以打破视图封装的限制，让你的样式能够渗透到子组件（也就是Material的Tabs组件）里。为了避免样式污染全局，记得搭配:host使用，这样样式只会作用在当前组件内。

比如你可以在组件的CSS里这么写：

/* 修改整个标签组的背景 */
:host ::ng-deep .tab-group {
  background-color: #f8f9fa;
  border-radius: 8px;
}

/* 修改标签的高度、背景 */
:host ::ng-deep .mat-tab-label {
  background-color: #e9ecef;
  min-height: 56px !important; /* 这里用!important是因为Material的默认样式优先级高 */
  margin: 0 4px;
}

/* 选中的标签样式 */
:host ::ng-deep .mat-tab-label.mat-tab-label-active {
  background-color: #007bff;
  color: white;
}

/* 修改标签内容区域的高度 */
:host ::ng-deep .mat-tab-body-wrapper {
  height: 400px; /* 固定高度，或者用min-height */
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

方法2：关闭组件的视图封装（适合需要大量自定义的场景） #

如果你需要对Material组件做很多样式修改，可以直接关闭当前组件的视图封装，这样你的CSS就能直接作用到内部的Material组件上。不过要注意，关闭后组件里的样式会变成全局样式，所以一定要给你的标签组加唯一的类名（比如你已经加的tab-group），避免影响其他组件。

首先在组件的TS文件里修改元数据：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-tab-component',
  templateUrl: './your-tab-component.component.html',
  styleUrls: ['./your-tab-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourTabComponentComponent {
  // 你的组件逻辑
  t = [...]; // 你的数据数组
}

然后在组件的CSS里直接写样式：

.tab-group {
  background-color: #f8f9fa;
  border-radius: 8px;
}

.tab-group .mat-tab-label {
  background-color: #e9ecef;
  min-height: 56px;
  margin: 0 4px;
}

.tab-group .mat-tab-label.mat-tab-label-active {
  background-color: #007bff;
  color: white;
}

.tab-group .mat-tab-body-wrapper {
  height: 400px;
  overflow-y: auto;
}

方法3：在全局样式文件中修改（适合全局统一样式） #

如果你希望整个应用的Tabs样式都统一，可以把样式写在Angular项目根目录的styles.css（或styles.scss）里。同样，要加组件选择器或者类名来限定范围，不然会影响所有Material Tabs组件：

/* 只修改app-your-tab-component里的标签页 */
app-your-tab-component .tab-group {
  background-color: #f8f9fa;
}

app-your-tab-component .tab-group .mat-tab-label {
  min-height: 56px;
  background-color: #e9ecef;
}

额外小贴士 #

• 关于dynamicHeight：你给mat-tab-group加了这个属性，它会让内容区域自适应内容高度。如果要固定高度，你可以去掉这个属性，再用上面的样式设置height或者min-height。
• 尽量少用!important：如果不用!important样式不生效，可以尝试提高选择器的优先级，比如多嵌套一层类名，比如.tab-group .mat-tab-label比直接.mat-tab-label优先级更高。

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