How to stop global styles from affecting my component

Question

Is there a way to seal my Angular component off from the global style sheet? I don't want the styles in the global style sheet to take effect inside my component.

I have tried this

.reset {
  all: initial;
  * {
    all: unset;
  }
}

but is there not a different way?

Answer 1

In your component decorator, add:

@Component({
    selector: '..',
    templateUrl: '..',
    styleUrls: ['..'],
    encapsulation: ViewEncapsulation.ShadowDom 
})

This will create a shadow dom and will force your component to use styles only from the provided styles/styleUrls array.

If you are using angular version < v6.1.0. You can use ViewEncapsulation.Native. It's deprecated after that.

Answer 2

try this, it must work:

:host ::ng-deep .reset{

  //your style
}