matTooltipClass未应用css

iyfjxgzm  于 2023-03-24  发布在  其他
关注(0)|答案(9)|浏览(114)

我试图将一些css更改应用到角材质2的mat-tooltip,并在文档中找到了一个matTooltipClass,然后可以在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;
}
pxiryf3j

pxiryf3j1#

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

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

omqzjyyz2#

除了上面所说的,这里有两个方法,为我工作:- 在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
    }
}
1zmg4dgp

1zmg4dgp3#

Siderite(Styling Angular Material tooltips)的一篇博客文章提供了一个对我有用的答案。我从他的帖子中最相关的部分改写,我使用了上面问题中描述的matTooltipClass=“tooltip”场景:
[The.tooltip class definition]应该在全局CSS文件中(因此它适用于所有内容),或者您的组件应该声明封装ViewEncapsulation. None。[如果.tooltip class definition在全局CSS文件中],请确保类的声明足够具体:试试这个:mat-tooltip-component .mat-tooltip.tooltip {...}。
在我的例子中,我已经在global styles.scss文件中定义了.tooltip类,直到我遵循Siderite的建议并像这样定义它才开始工作:

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

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

6ioyuze2

6ioyuze24#

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

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

k2arahey5#

从网站(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行放在你想要使用自定义工具提示类的组件上,它应该可以工作。

inn6fuwd

inn6fuwd6#

既然::ng-deep现在已经被删除了,那么最好的办法似乎是在styleUrls行下面的组件装饰器中添加encapsulation: ViewEncapsulation.None,
只是要小心,你的所有css类将是全局的,所以如果你不想意外地覆盖其他组件中的类,请确保你的类在那个组件中有唯一的名称

jckbn6z7

jckbn6z77#

我发现有一个div元素在body下面,class=“cdk-overlay-container”。我考虑了它的z-index。它比我的modal的z-index低1000。我让它和我的modal的z-index一样,即1050。它工作了。我还必须在CSS文件中的class之前放置::ng-deep。

::ng-deep .cdk-overlay-container {
  z-index: 1050;
}
lb3vh1jj

lb3vh1jj8#

如果您的项目禁止用途:::ng-deep,你可以使用
封装:ViewEncapsulation.None
在TS文件中。

xkrw2x1b

xkrw2x1b9#

在Angular 15中,类似于@StackOverflowUser所说的,我设法在我的styles.scss文件中使用以下代码:

mat-tooltip-component .mdc-tooltip__surface {
    background-color: mat.get-color-from-palette(themes.$palette-tooltip, 400) !important;
}

相关问题