[Angular] How to styling ng-content
Let's say you are builing a reuseable component. The style structure like this:
div > input
If you want to style this input field, it can be quite easy, we can just use :host selector:
:host input { outline: none; border: none; }
But one day you figure out that hard cord input into the component might not be a good idea. You want to use content projection 'ng-content' to do that. Now the html stucture boecomes:
div > ng-content
Even you know the ng-content will be the input field. But he will find that your styling no longer works.
This is because Angular style encapsulation. It tries to preserve the style of projection element (because the element is not part of component, it has its own styling, we don't want to break that).
So the way to solve this problem is using CSS '/deep/' selector.
:host /deep/ input { outline: none; border: none; }
'/deep/' break angular style encapsulation. You can think it is a global css styling which can overwrite everything ..:P Sounds pretty prowerful, and a little bit damage, yes! it is.
For example, if you doning like this :
/deep/ input { outline: none; border: none; }
You will find that, all the input fields in your app has been affected!! So to be safe, use with :host selector.
相关文章
- [Angular] Introduction to Angular Internationalization (i18n)
- [Angular] Getting to Know the @Attribute Decorator in Angular
- [Angular] Implementing A General Communication Mechanism For Directive Interaction
- [AngularJS] Angular 1.5 $transclude with named slot
- [Unit Testing] Karma with Angular mocks
- [Angular] How to show global loading spinner for application between page navigation
- [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter
- [Angular Directive] Combine HostBinding with Services in Angular 2 Directives
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
- [Angular 2] Writing a Simple Angular 2 Component
- [Whole Web] [AngularJS] Localize your AngularJS Application with angular-localization
- [Angular] $q.all()
- Angular HTTPClient 发送请求的触发方式讨论
- 使用 Angular HTTP_INTERCEPTOR 拦截器来记录超时请求的一些思考
- Angular 14 新的 inject 函数介绍