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

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.

htmlcssangularangular-componentsng-deep


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abderrahmen Mhemed

Related Questions