How to overwrite a css from main.component.scss in a child component scss file

Question

I have a scss file for my main component of my Angular 6 Application inside which i have added a css property for an html element. I want to overwrite the css property in the scss file in a child component. I have tried putting :host /deep/ and !important . Nothing works for me. I have tried changing the css property from the .ts file and it worked. I want to overwrite the same in my scss file only.

Example: main.component.scss

.global-content {
  margin-left: 12rem;
}

This is the main component scss file. I am trying to overwrite the same css property from my child component like this

child.component.scss

:host /deep/ .global-content {
  margin-left: 2rem !important;
}

Thanks in Advance

Answer 1

Please read this post about how to use encapsulation with sass in angular. https://blog.angular-university.io/angular-host-context/

And also try removing the "/" forward slash. may or may not work depending on your structure.

:host { 
   deep { 
      .global-content { margin-left: 2rem !important; }
   }
}

The above is just a guess as I can not test in here.

or you could use ng-deep css pseudo element:

:host ::ng-deep .global-content { margin-left: 2rem !important; }

I hope it helps.

Answer 2

Add Your Global Style sheet

like

app-root app-child .child-div {
   //add whatever css property you want to call
}

Ref : You Can Check Here