如何设置材质工具提示 Angular 7 的样式

Question

我已经尝试过这个和这个，这些问题的答案都不适合我。

我想要做的是设置工具提示的样式，我希望能够增加字体的大小。 目前我只能增加<div>的字体大小，但工具提示字体保持相同大小。

我的 html 看起来像这样：

<div id="divId" matTooltipClass="tooltip" matTooltip="This is a tooltip." matTooltipPosition="above"></div>

在我尝试使用的 CSS 中：

• ::ng-deep .mat-tooltip
• .mat-tooltip
• .mat-tooltip.tooltip

以及使用!important 。 这些都不会对工具提示的样式产生任何影响。

为什么这些解决方案都不起作用，能够设置工具提示样式的解决方案是什么？

Answer 1

将您的样式添加到全局样式、材料工具提示以及在 app-root 之外呈现的对话框。 即使使用重要的样式，您的样式也不起作用，因为您渲染的 css 的层次结构可能太低了。

如果您的资产文件夹中有外部 css 并配置了 angular.json，那么您的样式应该在那里。

Answer 2

您可以在组件中使用encapsulation: ViewEncapsulation.None或者您可以使用全局样式（例如：styles.scss）

<button mat-raised-button
       matTooltip="Info about the action"
       matTooltipClass="custom-tooltip"
       aria-label="Button that shows a red tooltip">
  Red-tooltip Action
</button> 

样式.scss

.custom-tooltip {
  background-color:white;
  height: auto;
  color: #000 !important;
  font-weight: 400;
  border-radius: 5px;
  font-size: 13px;
  padding: 8px;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgb(28 28 28 / 35%);
}

Answer 3

您还可以尝试使您的选择器更加具体。 通过在 *-component.css 文件中执行此操作，使其不会被覆盖

然后，您可以使用自定义样式查看工具提示。

Answer 4

::ng-deep不是必需的！

官方文档是这样写的

组件.ts：

    @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, //DON'T FORGET TO ADD THIS LINE
})

组件.html

<button mat-raised-button
        matTooltip="Info about the action"
        matTooltipClass="example-tooltip-red"
        aria-label="Button that shows a red tooltip"
        class="example-button">
  Red-tooltip Action
</button>

组件.css

.example-tooltip-red {
  background: #b71c1c;
}