matTooltipClass 没有应用 css答案

【问题标题】：matTooltipClass not applying cssmatTooltipClass 没有应用 css
【发布时间】：2018-10-03 23:17:45
【问题描述】：

我正在尝试从 angular material 2 对 mat-tooltip 应用一些 css 更改，并在文档中找到 matTooltipClass，然后可以在 css 文件中选择它进行更改。但是，我无法让它工作。

component.html：

  <mat-cell 
    *matCellDef="let productInfo" 
    matTooltip="{{productInfo.description}}"
    matTooltipClass="tooltip">
     {{ productInfo.description}}
  </mat-cell>

component.scss：

.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}

【问题讨论】：

标签： css angular angular-material2

【解决方案1】：

您必须使用::ng-deep 来覆盖材质元素的默认 CSS：

::ng-deep .tooltip {
  background-color: red;
  color: blue;
  font-size: 20px;
}

【讨论】：

我已经为此苦苦挣扎了好几个小时。非常感谢，@bugs
为什么这只适用于类名“工具提示”？当我更改为“mytooltip”时它不起作用！
确保在 ::ng-deep 之前使用 :host 以防止该类被应用于其他组件。

【解决方案2】：

除了上面所说的，这里有两种对我有用的方法： - 在 Component.scss 中：

::ng-deep mat-tooltip-component{
    & .mat-tooltip{
        color: green; // your custom properties here.
    }
}

-全球范围内：

.mat-tooltip{ // making the font size on the mat-tooltip 1.5rem globally
    font-size: 1.5rem;
    &.exaggerated-tooltip{  // to modify the tooltip create a class like this
        font-size: 2.5rem;  // and use it like this: *matTooltipClass="exaggerated-tooltip"* in the
        color: red;         // component in which you are putting the tooltip
    }
}

【讨论】：

“全局”方法是 Angular Material 7 对我有用的唯一方法！

【解决方案3】：

Siderite (Styling Angular Material tooltips) 的一篇博文提供了一个对我有用的答案。我从他的帖子中最相关的部分转述，我正在使用上面问题中描述的 matTooltipClass="tooltip" 场景：

[.tooltip 类定义] 应该在全局 CSS 中文件（因此它适用于所有内容）或您的组件应声明封装 ViewEncapsulation.None。 [如果 .tooltip 类定义在全局 CSS 文件中]，然后确保声明该课程足够具体：试试这个： mat-tooltip-component .mat-tooltip.tooltip {...}.

在我的例子中，我已经在全局 styles.scss 文件中定义了 .tooltip 类，直到我遵循 Siderite 的建议并像这样定义它之后它才起作用：

mat-tooltip-component .mat-tooltip.tooltip {
    color: blue !important;
}

这种方法避免使用 ::ng-deep ，如已接受的答案中所建议的那样。 Angular 文档指出该方法是deprecated。我确实发现我需要使用 !important，有些人认为这是不好的风格。

【讨论】：

就我而言，它仅在我删除第一部分时才有效，如下所示： .mat-tooltip.tooltip { color: blue !important; }

【解决方案4】：

Angular 材料文档说 matTooltipClass 支持与 ngClass 相同的语法。因此您可以尝试 [matTooltipclass]="'tooltip'"

<mat-cell 
   *matCellDef="let productInfo" 
   matTooltip="{{productInfo.description}}"
   [matTooltipclass]="'tooltip'">
   {{ productInfo.description}}
 </mat-cell>

【讨论】：

【解决方案5】：

看到::ng-deep 现在已经被贬低了，最好的办法是在你的styleUrls 行下的组件装饰器中添加encapsulation: ViewEncapsulation.None,

请注意，您的所有 css 类都将是全局的，因此如果您不想意外覆盖其他组件中的类，请确保该组件中的类具有唯一名称

【讨论】：

【解决方案6】：

来自网站（https://material.angular.io/components/tooltip/examples）中提供的示例：

import {Component, ViewEncapsulation} from '@angular/core';

/**
 * @title Tooltip that can have a custom class applied.
 */
@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,
})
export class TooltipCustomClassExample {}

如果您将 encapsulation: ViewEncapsulation.None 行放在您想要使用自定义工具提示类的组件中，它应该可以工作。这就是我最终解决问题的方式。

【讨论】：