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

Question

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

HTML 代码 文件 - datentry.component.html

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

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

CSS CODE 文件数据输入-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>

图片供参考当前视图

想要的视图

Answer 1

你在哪里为 .delay-msg-tooltip 写了 CSS？

由于 Angular View Encapsulation，您需要在 styles.scss 中编写样式，而不是组件的样式

Answer 2

根据 Material 图标文档

@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，因为 ToolTip 在技术上不在您的组件内部。或者

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

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

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

How to change css of the hover text in mat-icon angular?

html

css

angular-material

angular