Angular 9 - Using :host inside CSS vs !important to override CSS properties in the child class

Question

I'm a little confused about how hosting works vs !important.

I have Angular Material Expansion Panel.

  <mat-accordion multi="true">

        <mat-expansion-panel [expanded]="true">
          <mat-expansion-panel-header>
              Title 1
          </mat-expansion-panel-header>

          <mat-list >
              <mat-list-item>
                <mat-checkbox class="example-margin">Pepper</mat-checkbox>  
              </mat-list-item>

            <mat-list-item>
              <mat-checkbox class="example-margin">Pepper</mat-checkbox>  
            </mat-list-item>
            <mat-list-item>
              <mat-checkbox class="example-margin">Pepper</mat-checkbox>  
            </mat-list-item>
           </mat-list>

        </mat-expansion-panel>

      </mat-accordion>

CSS

    :host >>> .mat-expansion-panel-body{
    padding: 0 !important;
  }

I wanted to override .mat-expansion-panel-body padding but the only way I was able to achieve that was by using :host >>>. I tried using it !important selector but didn't do anything.

I'm wondering if this is the right way to override a CSS property in Angular 9 or is there a better way of doing it?

Answer 1

For small case techniques like ng-deep, :host, etc are fine. But when your application grows its better to have a theme file like in general where you override all material components as per your need.