我试图将一些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;
}
9条答案
按热度按时间pxiryf3j1#
你必须使用
::ng-deep
来覆盖材质元素的默认CSS:omqzjyyz2#
除了上面所说的,这里有两个方法,为我工作:- 在Component.scss中:
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的建议并像这样定义它才开始工作:
这种方法避免了使用::ng-deep,就像被接受的答案中所建议的那样。Angular文档指出这种方法已被弃用。我确实发现我需要使用!important,有些人认为这是不好的风格。
6ioyuze24#
Angular 材质文档说明matTooltipClass支持与ngClass相同的语法。因此,您可以尝试[matTooltipclass]="'tooltip'”
k2arahey5#
从网站(https://material.angular.io/components/tooltip/examples)提供的示例:
如果你把
encapsulation: ViewEncapsulation.None
行放在你想要使用自定义工具提示类的组件上,它应该可以工作。inn6fuwd6#
既然
::ng-deep
现在已经被删除了,那么最好的办法似乎是在styleUrls
行下面的组件装饰器中添加encapsulation: ViewEncapsulation.None,
。只是要小心,你的所有css类将是全局的,所以如果你不想意外地覆盖其他组件中的类,请确保你的类在那个组件中有唯一的名称
jckbn6z77#
我发现有一个div元素在body下面,class=“cdk-overlay-container”。我考虑了它的z-index。它比我的modal的z-index低1000。我让它和我的modal的z-index一样,即1050。它工作了。我还必须在CSS文件中的class之前放置::ng-deep。
lb3vh1jj8#
如果您的项目禁止用途:::ng-deep,你可以使用
封装:ViewEncapsulation.None
在TS文件中。
xkrw2x1b9#
在Angular 15中,类似于@StackOverflowUser所说的,我设法在我的styles.scss文件中使用以下代码: