自定义Angular主题仅生效于部分元素，如何让其覆盖全部元素？

问题原因 #

1. Angular视图封装机制：默认情况下，Angular组件启用Emulated视图封装，组件内部样式会被添加专属属性，全局主题文件中的普通选择器无法穿透到组件内部的原生HTML元素（如mat-card-content里的<p>标签）。
2. 样式优先级冲突：Angular Material组件自带的内置样式优先级可能高于你在主题文件中定义的样式，导致自定义样式被覆盖。

修复方案 #

方案1：使用::ng-deep穿透封装 #

在my-theme.scss中，针对目标元素添加::ng-deep前缀，强制穿透组件的视图封装：

::ng-deep mat-card-content p {
  // 自定义排版样式示例
  font-size: 1.2rem;
  color: #2d3748;
  line-height: 1.7;
}

注：::ng-deep属于非标准特性，Angular官方不推荐长期依赖，但在全局主题文件中使用的兼容性和风险相对可控。

方案2：提升样式选择器优先级 #

通过更具体的选择器组合，让自定义样式优先级超过Material内置样式：

.example-card mat-card-content p {
  // 自定义排版样式
  font-size: 1.2rem;
  font-weight: 400;
}

这里利用你给mat-card设置的example-card类，组合出更具体的选择器，无需依赖!important即可覆盖默认样式。

方案3：通过Material主题变量全局配置排版（推荐） #

如果是排版类样式，直接通过Angular Material的主题变量定义全局排版规则，这是最符合Material设计规范的方式：

@import '@angular/material/theming';

// 定义自定义排版配置
$custom-typography: mat-typography-config(
  $font-family: 'Inter, Roboto, sans-serif',
  $body-1: mat-typography-level(16px, 28px, 400),
  $body-2: mat-typography-level(14px, 24px, 400)
);

// 构建自定义主题并应用排版
$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, A200, A100, A400);
$my-theme: mat-light-theme(
  $color: mat-light-theme($my-primary, $my-accent),
  $typography: $custom-typography
);

// 全局应用主题
@include angular-material-theme($my-theme);

这种方式会自动将排版规则应用到所有Material组件的内容区域，包括mat-card-content内的文本元素。

方案4：禁用单个组件的视图封装（不推荐全局使用） #

如果仅特定组件存在该问题，可以在组件装饰器中关闭视图封装，让全局样式直接生效：

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

@Component({
  selector: 'app-card-example',
  templateUrl: './card-example.component.html',
  styleUrls: ['./card-example.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CardExampleComponent {}

注意：禁用视图封装后，该组件的样式会变成全局样式，容易引发样式污染，仅适合临时调试或特殊场景。

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