https://levelup.gitconnected.com/how-to-override-css-in-angular-component-libraries-such-as-angular-material-45d4b00b1790
Recommended approach:
. Use host
:host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so we can select a custom element from inside its shadow DOM) (source: MDN)
:host {
::ng-deep .anyclass
}
use at app.component.scss because app.component loads all components including ones from library, so use :host() to take shadow DOM of app component will contain every css used
1. Change ViewEncapsulation
ViewEncapsulation Defines template and style encapsulation options available for Component’s Component.
ViewEncapsulation.None: By using this method we are exposing our styles to outer components. (Note: we need to be sure to use proper selectors)
This can help to override any component CSS but we need to make sure that we assign a unique id if we want to override something otherwise it will spoil your parent component CSS.
You can play with a practical example here.
https://stackblitz.com/edit/angular-material-view-encapsulations
2. Use host
:host() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so we can select a custom element from inside its shadow DOM) (source: MDN)
The host can help to override CSS without touching the view encapsulations.
You can check the practical example here.
https://stackblitz.com/edit/angular-host-style
3. Use ng-deep (deprecated)
::ng-deep disable view encapsulation for specific CSS rules, in other words, it gives you access to DOM elements, which are not in your component's HTML.
ng-deep can also work as the host to override CSS.
You can check the practical example here.
No comments:
Post a Comment