Override Angular Material CSS differently in different components

Question

I have two components with tab groups in them. One is a main page and I have overwritten the css to make the labels larger, done using ViewEncapsulation.None. The other is a dialog, and I want to keep it small but still apply some other custom styles to it.

When I open the dialog after visiting the other tabs page, it copies all the styles, which I have figured is because ViewEncapsulation.None bleeds CSS but not exactly as expected.

Is there anyway to override Angular Material styles without changing ViewEncapsulation so that I can keep the two components separate?

Answer 1

Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)

Note: ViewEncapsulation is none here.

component.html

<div class="my-component__container">
    <!-- other elements(material) are here -->
</div>

component.scss

.my-component__container{
    // override material styles here
    .mat-form-field{...}
}

Solution 2: use /deep/(deprecated).(use ::ng-depp insteaded)

:host /deep/ .mat-form-field {
  text-align: left !important;
}

Solution 3: don't change ViewEncapsulation , then:

:host {
  .my-component__container{}
}