matTooltipClass无法应用CSS样式问题求助

我之前也踩过这个坑！你用matTooltipClass给tooltip加自定义类但样式不生效，核心原因是Angular的视图封装机制和tooltip的DOM挂载方式导致的——tooltip元素是被Angular Material动态挂载到全局<body>下的，而你的组件样式默认被封装在自身作用域里，根本找不到这个全局的tooltip元素。

下面给你几个实用的解决办法，按推荐程度排序：

1. 用::ng-deep穿透组件样式封装 #

这是最快捷的方式，适合只在当前组件里使用这个tooltip样式的场景：

// component.scss
::ng-deep .tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}

::ng-deep会让你的样式穿透组件的封装边界，作用到全局的tooltip元素上。如果还是不生效，可以把选择器写得更具体，提高优先级覆盖Material的默认样式：

::ng-deep .tooltip.mat-tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}

2. 把样式放到全局样式文件 #

如果这个tooltip样式需要在多个组件里复用，直接把样式写到项目的全局样式文件（比如styles.scss）里就行，全局样式不受组件封装限制：

// styles.scss
.tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}

3. 关闭当前组件的视图封装 #

这种方式要谨慎使用，因为关闭后组件内的所有样式都会变成全局样式，容易污染其他组件的样式：

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

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

之后你原来写的.tooltip样式就能正常生效了。

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