Angular v16中如何合理自定义Angular Material Tooltip组件？

1. 基于主题系统修改（官方推荐） #

Angular Material的MDC组件（如mat-mdc-tooltip）的样式由主题系统管控，直接修改主题变量是最可靠的方式，完全不受组件内部样式结构变化影响。

在你的主题SCSS文件（比如styles.scss）中，通过官方API覆盖Tooltip的排版变量：

@use '@angular/material' as mat;

// 定义基础主题（已有则跳过）
$custom-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
  )
);

// 自定义Tooltip排版，设置字体大小为1rem
$tooltip-typography: mat.define-typography-level(
  $font-size: 1rem,
  $line-height: 1.5
);

// 将自定义排版更新到主题
$custom-theme: mat.update-theme($custom-theme, (
  typography: (
    mdc-tooltip-surface: $tooltip-typography,
  )
));

// 生成最终主题样式
@include mat.all-component-themes($custom-theme);

2. 使用公开的CSS自定义属性 #

MDC组件会暴露公开的CSS变量，你可以直接通过这些变量调整样式，无需依赖内部类名：

/* 全局生效，放在styles.scss中 */
.mat-mdc-tooltip {
  --mdc-tooltip-supporting-text-font-size: 1rem;
}

这种方式比直接覆盖内部类更稳定，因为官方不会随意移除公开的自定义属性。

3. 局部调整用::ng-deep（仅限局部场景） #

如果只需要在某个组件内调整Tooltip样式，可结合:host和::ng-deep实现局部生效，同时避免依赖内部类层级：

/* 在目标组件的.scss文件中 */
:host ::ng-deep .mat-mdc-tooltip {
  --mdc-tooltip-supporting-text-font-size: 1rem;
}

注意：优先采用前两种方案，::ng-deep仅作为局部场景的补充方案。

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