如何用:host-context()和:not()在Angular组件中(本地(正确地求反？
例如，假设有一个亮/暗主题，只与body.dark不同(添加到"暗"主题(，而我们只需要在"暗"中使用red颜色；"轻"；主题没有改变颜色在"；深色"；本地主题(意味着代码应该在本地Angular组件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
}
在组件上使用encapsulation: ViewEncapsulation.None，这将为整个项目打开组件的样式。您可以通过在组件上使用一个类并在该类下添加特定于组件的样式来控制它。
在这里的工作演示中显示，以及您的要求。
通过这种方式，您可以在组件本身中添加特定于组件的样式(用于主题和常规样式(，而无需将它们添加到global-styles.css文件中。