[英]Angular how to use ng-deep but still affect only one component?
In an Angular application, using Angular Material for themes, I'm trying to update a css class in a component when my theme changes to dark.在 Angular 应用程序中,使用 Angular 材料作为主题,我正在尝试更新 css ZA2F2ED4F8EBCDC4061D 组件中的组件
This would work, but it would affect all components, loosing the encapsulation:这会起作用,但会影响所有组件,失去封装:
::ng-deep .dark-theme { // must have ::ng-deep to see .dark-theme on body
.action-button:hover {
color: #ffffff;
}
}
How can I have same result, but only for one component?我怎样才能得到相同的结果,但只针对一个组件?
I've tried this as mentioned here but doesn't seems to work for me:我已经尝试过这里提到的但似乎对我不起作用:
::ng-deep .dark-theme {
:host .action-button:hover {
color: #ffffff;
}
}
// OR
:host ::ng-deep .dark-theme .action-button:hover {
color: #ffffff;
}
Try this:尝试这个:
As we set the View Encapsulation(Emulated) to the required component the styles will be applied only to the elements within the component's template.当我们将 View Encapsulation(Emulated) 设置为所需的组件时,styles 将仅应用于组件模板中的元素。
@Component({ selector: 'app-emulated-encapsulation', template: '', styles: '', encapsulation: View Encapsulation.Emulated, }) @Component({选择器:'app-emulated-encapsulation',模板:'',styles:'',封装:查看Encapsulation.Emulated,})
With the limited info provided to actually test the scenario, you can avoid using ng-deep and host too if setting the Encapsulation property in @Component block fixes your issue.使用提供的有限信息来实际测试场景,如果在 @Component 块中设置 Encapsulation 属性可以解决您的问题,您也可以避免使用 ng-deep 和 host。
Pls refer - https://angular.io/guide/view-encapsulation for further info.请参考 - https://angular.io/guide/view-encapsulation了解更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.