0

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.

Fazla Elahi Md Jubayer
  • 177
  • 2
  • 12

1 Answers1

0

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

Abderrahmen Mhemed
  • 106
  • 2
  • 11
  • i think you misunderstood my question, by using ng-deep its already overriting global one but problem is I want to scope this overrite only for that component. Currently while this overrite is happening it also remain for rest of life of the application ( when I navigate to other component) until I do browser refresh. – Fazla Elahi Md Jubayer May 13 '22 at 10:28
  • btw I have also tried !important it did same. Do you meant use !important without ng-deep? – Fazla Elahi Md Jubayer May 13 '22 at 10:30