星云主题和原始 HTML

Question

我使用 2 个星云主题：光明和黑暗。一个组件将来自库的 HTML 结果绑定到 innerHtml，如下所示：

<div [innerHtml]="songHtml"></div>

我应用自定义 css 来设置此内容的样式。为了让它工作，我添加了

@Component({
    [...]
    encapsulation: ViewEncapsulation.ShadowDom,
})

现在我需要像这样应用主题颜色：

@include nb-install-component() {
    .chords-color-red {
        color: nb-theme(text-color-red)
    }
}

但这不起作用...我读到它不能与 ViewEncapsulation 一起使用。

我也尝试过（没有成功）：

有没有办法让它发挥作用？谢谢

Answer 1

我终于找到了一些东西，但它并不漂亮。

我删除了 ViewEncapsulation
我把每个我想应用到 innerHTML 的 css 放在 ::ng-deep { }
第 2 点不适用于 nb-install-component，所以我将每个 nb-theme 都放在 ::ng-deep { } 之外，并在每个 css 前面添加了 ::ng-deep组

注意：ng-deep 已被弃用，但我找不到其他方法让它工作

Nebular theme and raw HTML