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

Question

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

HTML 代码文件 - datentry.component.html

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

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

CSS CODE文件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>

用于参考当前视图的图像

想要的视图

Answer 1

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

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

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

您可以在 styles.css 中添加styles.css以便全局应用。

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