问本地否定:host-host()的选择
EN

Stack Overflow用户

提问于 2021-11-30 22:28:58

回答 1查看 137关注 0票数 2

如何用:host-context()和:not()正确地否定角分量(局部)

例如，假设有一个光/暗主题，仅与body.dark不同(添加到“暗”主题)，我们只需要在“光明”主题中使用red颜色，而在“暗”主题中本地不改变颜色(这意味着代码应该在本地角分量SCSS中工作)：

在foo-bar.component.scss中

:host-context(:not(.dark)) { 
    color: red; // red color needed only in "light" theme, no changes to color for "dark" theme
}

发布于 2021-12-01 03:30:17

在组件上使用encapsulation: ViewEncapsulation.None，这将为整个项目打开组件的样式。您可以通过在组件上使用类并在该类下添加特定于组件的样式来控制这一点。

在一个工作演示这里中显示了您的需求。

这样，您可以在组件本身中添加特定于组件(主题和一般样式)的组件，而无需将它们添加到全局styles.css文件中。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70176925

复制

相似问题

问本地否定:host-host()的选择EN