如何强制Angular不封装嵌套CSS规则？

我懂你这个痛点！Angular的视图封装确实会让自定义Material组件内部样式变得麻烦，尤其是像mat-tab-group这种嵌套结构的组件，下面给你几个靠谱的解决办法：

方法一：用::ng-deep穿透视图封装 #

这是最直接的方案，::ng-deep可以打破Angular的样式封装限制，让你的样式能作用到子组件（比如mat-tab-header）的内部元素上。同时搭配:host伪类，确保样式只作用在当前组件内的目标元素，不会污染全局样式：

/* 组件内的CSS文件 */
:host .buttons-tab ::ng-deep .mat-tab-header {
  /* 这里写你的自定义样式规则 */
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  padding: 0 16px;
  /* 更多样式... */
}

• :host：指代当前组件的宿主元素，确保样式只影响当前组件里的.buttons-tab元素
• ::ng-deep：穿透到子组件的DOM结构，让样式能作用到内部的.mat-tab-header

方法二：关闭当前组件的视图封装 #

如果你不想用::ng-deep（官方曾提示它可能在未来版本被废弃），可以关闭当前组件的视图封装，然后用专属类名限定样式范围：

首先在组件的TS文件里修改装饰器配置：

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

@Component({
  selector: 'app-your-target-component',
  templateUrl: './your-target-component.component.html',
  styleUrls: ['./your-target-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourTargetComponentComponent { }

然后在组件的CSS里写你原来的规则就行，记得保留.buttons-tab类来避免全局污染：

.mat-tab-group.buttons-tab > .mat-tab-header {
  /* 你的自定义样式 */
}

⚠️ 注意：关闭封装后组件内的所有样式都会变成全局样式，所以一定要用专属类名（比如.buttons-tab）精准定位目标元素，别影响到其他组件。

方法三：通过自定义Material主题调整（推荐用于主题相关样式） #

如果你的样式是和颜色、字体这类主题属性相关的，推荐用Angular Material的主题系统来修改，这样更符合Material Design规范，也不会有封装问题。比如在你的主题SCSS文件里添加：

// 先定义自定义主题变量
$custom-tab-primary: mat-palette($mat-blue, 500);
$custom-tab-accent: mat-palette($mat-pink, 400);
$custom-tab-theme: mat.define-light-theme((
  color: (
    primary: $custom-tab-primary,
    accent: $custom-tab-accent,
  )
));

// 给目标tab-group应用自定义主题和额外样式
.mat-tab-group.buttons-tab {
  @include mat.tab-theme($custom-tab-theme);
  
  .mat-tab-header {
    background-color: mat-color($custom-tab-primary, 50);
    // 其他主题相关样式
  }
}

这种方法适合统一调整主题风格，如果你只是改个布局、间距，前两种方法会更高效。

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