[英]How to style ng-bootstrap components in Angular 2
I'm trying to apply styles to the ngbTooltip component in my Angular 2 app.我正在尝试将样式应用于 Angular 2 应用程序中的 ngbTooltip 组件。 I apply the directive as:我将指令应用为:
<div [ngbTooltip]="tooltipText">
Element text
</div>
But since Angular 2 applies style scoping, I can't directly style the .tooltip
class in my component's template.但是由于 Angular 2 应用了样式范围,我无法直接在组件模板中设置.tooltip
类的样式。
How can I give the tooltips for this specific component a custom styling?如何为该特定组件的工具提示提供自定义样式?
EDIT:编辑:
I have a scss stylesheet that's attached to my component.我有一个附加到我的组件的 scss 样式表。 My styles (simplified) are:我的风格(简化)是:
.license-circle {
width: 10px;
... other styles
}
/deep/ .tooltip {
&.in {
opacity: 1;
}
}
But then my rendered styles look like:但是我渲染的样式看起来像:
<style>
.license-circle[_ngcontent-uvi-11] {
width: 10px; }
.tooltip.in {
opacity: 1; }
</style>
Which makes me believe the tooltip styles are being un-encapsulated (instead of just piercing this component's children.这让我相信工具提示样式是未封装的(而不仅仅是刺穿该组件的子项。
Note: I tried :host >>> .tooltip
and it didn't work, so I ended up using /deep/
.注意:我试过:host >>> .tooltip
但它没有用,所以我最终使用了/deep/
。
Thanks!谢谢!
As mentioned in the comment, the selectors should start with :host
正如评论中提到的,选择器应该以:host
开头
:host .license-circle {
width: 10px;
... other styles
}
:host /deep/ .tooltip {
&.in {
opacity: 1;
}
}
For angular version 8.3, ::ng-deep is recommended对于 Angular 8.3 版本,推荐使用 ::ng-deep
::host .license-circle {
width: 10px;
... other styles
}
:host ::ng-deep .tooltip {
&.in {
opacity: 1;
}
}
One thing that we need to remember is that ::ng-deep, /deep/ & >>> have been deprecated in angular 9. So, finding some other long term solution would be a good thing to do at this point.我们需要记住的一件事是 ::ng-deep、/deep/ & >>> 在 angular 9 中已被弃用。因此,此时寻找其他一些长期解决方案将是一件好事。 Check out the docs for more.查看文档了解更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.