matTooltipClass不应用CSS

Question

我试图运用一些CSS改变从角材料2 mat-tooltip和文档中发现，然后可以在CSS文件中选择以进行修改matTooltipClass。然而，我无法得到它的工作。

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

Answer 1

你必须使用::ng-deep覆盖默认的CSS的物质要素：

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

Answer 2

角材医生说matTooltipClass支持相同的语法ngClass。因此，你可以尝试[matTooltipclass] =“‘提示’”

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

Answer 3

除了上面的东西有人说，这里是为我工作的两种方法： - 在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
    }
}

Answer 4

在blog post名为菱铁矿一位绅士只要为我工作的答案。我从他的职位最相关的部分意译，我现在用的matTooltipClass =“提示”，在上面的问题描述的场景：

[该.tooltip类定义]要么是在全局CSS文件（所以它适用于一切），或者你的组件应该声明封装ViewEncapsulation.None。 [如果.tooltip类定义是在全局CSS文件]，然后保证类的声明是不够具体：试试这个：垫提示分量.MAT-tooltip.tooltip {...}。

就我而言，我已经定义在全球styles.scss文件.tooltip类，它不能正常工作，直到我跟着菱铁矿的建议，并这样定义它：

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

这种方法避免使用:: NG-深为接受的答案建议。角文件指出做法是deprecated。我没有找到我需要使用！重要的是，一些人认为是不好的风格。