CODEWITHSUNDEEP
cssangularangular-materialangular7
Wayne Kaskie
Wayne Kaskie

Reputation: 3483

ng-deep is effecting sibling components

I ran into an issue using Angular Material Design where I need to use ng-deep in order to adjust the styling of an accordion. However, I am using an accordion elsewhere and it is grabbing the same styles. This is not desired.

Is it supposed to do that? How do I fix it?

Upvotes: 2

Views: 1267

Answers (2)

Elias Garcia
Elias Garcia

Reputation: 7282

ng-deep is deprecated, and support is being removed from major browsers. You can read more about it in the Angular Docs.

I would suggest you to remove the view encapsulation from the component instead (None removes style encapsulation for that component, so you can target Angular Material styles).

import { ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-example-component',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Upvotes: 2

Wayne Kaskie
Wayne Kaskie

Reputation: 3483

I found that in order to keep the styles limited to the component, I had to encapsulate the ::ng-deep code with :host like so:

:host {
    ::ng-deep {
        /* ... custom styles here */
    }
}

Upvotes: 1

Related Questions