设置 Angular Material Tooltip 的字体大小

Question

我对 Web 开发非常陌生，我不知道如何解决以下问题，尽管它可能很容易。

我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示：

 <div mdTooltip="tooltip text" mdTooltipPosition="above">
  <span>Show tooltip</span>
</div>

我想让工具提示文本的字体大小更大。但是，我没有设法在 Angular Material 文档中找到如何做到这一点，也没有在网络上搜索。有谁知道如何做到这一点？谢谢。

原文由 GLR 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过在主样式文件中添加 .mat-tooltip css 声明并在那里更改字体大小来解决此问题。您需要在字体大小上设置 !important 否则它不会显示。

原文由 Dean Chalk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过使用 /deep/ 添加自定义类 + 来仅为您的组件设置自定义样式，这将 仅对 您的自定义类而 不是 全局应用 css 更改。

例如为图像标签添加自定义工具提示：

 <img
   matTooltip="text"
   matTooltipClass="my-custom-class"<----
   src=""/>

并在 css 文件中：

 /deep/ .mat-tooltip.my-custom-class {<---
  background: #FFFFFF;
}

原文由 ron 发布，翻译遵循 CC BY-SA 4.0 许可协议