如何设置材质工具提示Angular 7答案

【问题标题】：How to style material tooltip Angular 7如何设置材质工具提示Angular 7
【发布时间】：2019-12-03 18:47:57
【问题描述】：

我已经尝试过this 和this，这些问题的答案都没有对我有用。

我想做的是设置工具提示的样式，我希望能够增加字体的大小。目前我只能增加<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。这些都不会对工具提示的样式产生任何影响。

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

【问题讨论】：

标签： html css angular

【解决方案1】：

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

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

【讨论】：

另外 /deep/ 和 ::ng-deep 目前已弃用（看这里）：angular.io/guide/component-styles

【解决方案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>

styles.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%);
}

【讨论】：

【解决方案3】：

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

然后您可以看到带有自定义样式的工具提示。

【讨论】：

【解决方案4】：

::ng-deep 不是必须的！

官方文档是这样写的

component.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
})

component.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>

component.css

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

【讨论】：