How to alter styling declared in global style.scss from a child component css and scope it only for that component

Question

I have declared some css styling in global style.css file which is src/style.css in my angular project. In one of my component I want to alter some styling and scope it only for that component. Currently, I can able to do that by using ::ng-deep, but, problem is, while I am changing global style from my child component using ::ng-deep it also alter the styling in global.scss as a result rest of my component also affecting for this. So what I want is, when I am changing this global style from that child component I just want to scope that change under that component.

The CSS I declare in Src/Style.css is:

.main-content {
  width: 100%;
  padding: 24px;
}

and in my component I use following style in component css file :

::ng-deep .main-content {
  padding: 24px 0;
 }

At this moment, how can I alter the global styling from child component and scope that change only for that component.

Answer 1

You can try using the !important property on your component's css file, that will overrite the global one.