Can we control ViewEncapsulation.None from affecting the other components in the angular application?

Question

@Component({
...
...
...
encapsulations: ViewEncapsulation.None
})

when i use encapsulation like that it conflicts the default style in the other components in application.

Answer 1

When you load a component with ViewEncapsulation.None, its styles are applied to all the app.

So the answer is no, you can't...

But, what you can do is writing unique css style in your components style file, for example:

<app-toolbar></app-toolbar>

in your toolbar html you have something like:

<span>hello</span>
<div>My name is</div>

to apply styles only to this component write in its styles file:

app-toolbar span{
  color: green;
}

app-toolbar div{
  color: red;
}

or even better if you use scss files:

app-toolbar {
  span {
    color: green;
  }
  div {
    color: red;
  }
}

EDIT:

What you also could do and this works for sure (tested):

<app-toolbar></app-toolbar>

In this component html file (wrap all of its content in a div):

<div class="my-toolbar">
  <span>hello</span>
  <div>My name is</div>
</div>

Then in its style file:

.my-toolbar span{
  color: green;
}

.my-toolbar div{
  color: red;
}

or in scss format:

.my-toolbar {
  span {
    color: green;
  }
  div {
    color: red;
  }
}

Answer 2

For override the angular-material default style you can use ng-deep in your scss file instead of using encapsulations: ViewEncapsulation.None in your ts file.

For example:

Overriding angular tooltip:

my-tooltip.component.ts

...

@Component({
  selector: 'app-my-tooltip',
  templateUrl: './my-tooltip.component.html',
  styleUrls: ['./my-tooltip.component.scss']
})

...

my-tooltip.componnent.html

<button
   matTooltip="tooltip text here"
   matTooltipPosition="after"
   matTooltipClass="my-tooltip-class">
</button>

my-tooltip.componnent.scss

::ng-deep .my-tooltip-class {
  background-color: red;
  font-size: small;
  margin: 0 !important;
}