Angular 18.2.3中自定义Angular Material Tooltip样式(matTooltipClass)无效的问题求助
Angular 18.2.3中自定义Angular Material Tooltip样式(matTooltipClass)无效的问题求助
大家好,我最近碰到了Angular Material Tooltip样式自定义的棘手问题,想请教下各位开发者的思路:
我的项目基于Angular 18.2.3,通过ng add命令安装了适配版本的Angular Material,并且已经在shared.module.ts里导入并导出了BrowserModule、BrowserAnimationsModule和MatTooltipModule,Tooltip本身的基础功能是正常的。
我在模板里是这么使用Tooltip的:
<a [tabindex]="0" id="testTool" matTooltip="This is a static simple tooltip Text" matTooltipClass="special-class" aria-tooltip="Button that displays and hides a tooltip triggered by other buttons" matTooltipPosition="above" translate>Simple Tooltip Button</a>
但不管我怎么折腾,matTooltipClass指定的special-class就是完全不生效:
- 试过在组件的SCSS文件里写样式,加不加
::ng-deep都没用 - 也试过把样式移到全局的
styles.scss里,依然没有效果
目前唯一能让样式生效的方式,是用全局深度选择器直接覆盖默认类:
::ng-deep .mdc-tooltip__surface { /* white-space: pre !important; */ font-family: monospace !important; color: white !important; background-color: black !important; padding: 10px !important; text-align: left !important; border-radius: 6px !important; max-width: unset !important; white-space: pre-wrap !important; }
可这种方式的问题很明显:所有Tooltip都会被迫使用同一种样式,我没办法给不同的Tooltip单独设置自定义样式了。
有没有大佬能给点提示或者可行的解决办法?万分感谢!
内容来源于stack exchange
相关产品推荐
相关产品推荐

