如何设置材质工具提示的角度Angular 7

Question

我尝试过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。这些都没有改变工具提示的样式。

为什么这些解决方案都不起作用，如何设计工具提示的解决方案是什么？

Answer 1

将样式添加到全局样式，材质工具提示以及对话框均在app-root之外呈现。即使渲染的css的层次结构很重要，您的样式也无法使用。

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

Answer 2

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

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

Answer 3

不需要

::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;
}

Answer 4

您可以在组件中使用 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%);
}