matTooltipClass不应用css

Question

我试图mat-tooltip从角度材料2 应用一些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 中：

::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 3

在 Angular 15 中我按如下方式解决了这个问题：

组件 HTML 文件：

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

全局 CSS 文件：

.myTooltip {
  .mdc-tooltip__surface {
    max-width: 350px;
    padding: 5px;
  }
}

不需要ViewEncapsulation.None或!important，这可能会导致组件其余部分出现布局问题，应该避免。另外，::ng-deep由于已被弃用，我建议不要使用它。