如何解决使用 :host-context(.theme) 将样式应用于 ngx-bootstrap 模态对话框
在我们的项目中,我们有一个基于 :host-context(.theme)
的网站主题更改。关于样式应用的一切都很好,直到我坚持将它应用到 ngx-bootstrap 模态对话框。我在我的 less 文件中有这个基本结构:
each(@themes,{
:host-context(.theme-@{value}) {
@colors: @themesVariables[@@value];
.modal-body {
background: @colors[color-background]
}
// and so on
}
});
打字稿:
openModal(template: TemplateRef<any>,title: string) {
this.modalTitle = title;
this.modalRef = this.modalService.show(template);
}
模板:
<ng-template #modalTemplate>
<div class="modal-header">
<div class="title">{{modalTitle}}</div>
</div>
<div class="modal-body">
...body...
</div>
<div class="modal-footer">
<button class="primary" (click)="submit()">submit</button>
<button class="secondary" (click)="cancel()">cancel</button>
</div>
</ng-template>
但是,当我将相同的样式应用于模态时,但没有 :host-context()
时一切正常。
我无法理解,是什么导致了这样的行为。任何人都可以解释这个问题或/并为此提供解决方案吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。