css – 自定义Angular Material 2工具提示样式

前端之家收集整理的这篇文章主要介绍了css – 自定义Angular Material 2工具提示样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在AngularJS中,可以使用选择器.md-tooltip在CSS中设置工具提示的样式

在Angular 4中使用自定义格式工具提示方法是什么?

编辑:

我正在使用Angular 4&材料2.

我如何使用它的一个例子是:

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

显示工具提示非常好,除了我不知道如何设计它的事实.

解决方法

如果要自定义工具提示的css,则可以使用:: ng-deep.在组件的样式中添加以下样式:
::ng-deep .mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}

另一种选择是在组件中将View Encapsulation设置为无:

@Component({ 
    templateUrl: './my.component.html',styleUrls: ['./my.component.css'],encapsulation: ViewEncapsulation.None
})

然后在你的组件css中你不必使用:: ng-deep.

.mat-tooltip {
    /* your own custom styles here */ 
    /* e.g. */
    color: yellow;
}
原文链接:https://www.f2er.com/css/216218.html

猜你在找的CSS相关文章