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?

Arun Mohan · Accepted Answer · 2020-05-13 18:29:07Z

2

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.

answered May 13, 2020 at 18:29

Arun Mohan

1,2271 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related