如何在 mat-icon angular 中更改悬停文本的 css？答案

【问题标题】：How to change css of the hover text in mat-icon angular?如何在 mat-icon angular 中更改悬停文本的 css？
【发布时间】：2022-01-20 14:04:00
【问题描述】：

我正在使用这样的垫子图标

HTML 代码文件 - dateentry.component.html

<mat-icon 
      matTooltip="Time limit exceeded for current sku" 
      matTooltipPosition="above" 
      matTooltipClass="delay-msg-tooltip">
      info
</mat-icon>

我想更改悬停文本“当前 SKU 已超出时间限制”的背景颜色和字体颜色，我已经尝试过这样的方法，但没有成功。

CSS 代码文件 dataentry-component.scss

.delay-msg-tooltip {
  background-color: #FFFFFF!important;
  color: #5F5F5F!important;
  box-shadow: 0px 4px 23px #0000000d!important;
  border-radius: 5px;
}

为了在浏览器中参考，mat-icon HTML 显示如下

<mat-icon _ngcontent-nph-c79="" role="img" mattooltip="Time limit exceeded for current sku" mattooltipposition="above" mattooltipclass="delay-msg-tooltip" class="mat-icon notranslate mat-tooltip-trigger material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true" data-mat-icon-type="font" aria-describedby="cdk-describedby-message-0" cdk-describedby-host=""> info </mat-icon>

图片供参考当前视图

想要的视图

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

.delay-msg-tooltip 的 CSS 是在哪里编写的？

由于 Angular 视图封装，您需要在 styles.scss 中编写样式，而不是组件的样式

【讨论】：

我已经更新了上面的文件名
将 .delay-msg-tooltip 的样式移动到您的 styles.scss 中，您应该会很好。请记住，这会将样式全局应用于具有该类的任何工具提示
你知道如何在文本中添加一个 img，就像我在上面添加的所需图像中那样吗？

【解决方案2】：

根据材料图标文档

@Component({
  selector: 'tooltip-custom-class-example',
  templateUrl: 'tooltip-custom-class-example.html',
  styleUrls: ['tooltip-custom-class-example.css'],
  // Need to remove view encapsulation so that the custom tooltip style defined in
  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
  encapsulation: ViewEncapsulation.None,
})

您要么必须将ViewEncapsulation 设置为None，以便将您在组件中应用的样式应用到matToolTip，因为从技术上讲，工具提示不在组件内部。或者

您可以在styles.css 中添加样式，以便全局应用它们。

我建议做后者。因为它使我免于更改组件的视图封装并保持封装该组件的样式

【讨论】：