Question

我正在尝试对角度素材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;
}

Answer 1

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

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

Answer 2

除上述内容外，这有两种对我有用的方法： -在Component.scss中：

--add-exports THEIR_MODULE/THEIR_PACKAGE=ALL-UNNAMED

-全局：

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

Answer 3

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

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

Answer 4

blog post中一位名叫Siderite的绅士提供了对我有用的答案。我从他的帖子中最相关的部分来解释，我使用的是上述问题中所述的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，有些人认为这很不好。

matTooltipClass不应用css

4 个答案: