Change Global Css Code using Local Css Code

Question

If I have a css code section { margin-left: 80px; } in global css and If I need to change the code into margin-left: 40px; by using local css code. Is it possible to do it?

Is it possibly to change the global css code by using local javascript and local css code?

A sample is provided:
https://stackblitz.com/edit/angular-85deej

Thank you!

https://stackoverflow.com/questions/56316099/how-exactly-css-works — Stavm, Nov 17 '19 at 07:42

score 1 · Accepted Answer · answered Nov 17 '19 at 08:43

1

I would suggest you read about view encapsulation here for more information.

Try this:

::ng-deep section { margin-left: 80px; }

Check the stackblitz here

answered Nov 17 '19 at 08:43

Athanasios Kataras

25,191
4
32
61

1

`::ng-deep` is marked as deprecated and will be removed at some point, you should try to avoid it as much as possible. – Ploppy Nov 17 '19 at 09:21

score -1 · Answer 2 · answered Nov 17 '19 at 07:42

-1

Try margin-left: 40px!important; in your local css, it will override global css property.

answered Nov 17 '19 at 07:42

Sabith

1,628
2
20
38

Can you share the html part as well? – Sabith Nov 17 '19 at 07:55

Change Global Css Code using Local Css Code

2 Answers2