Switch between 2 global SCSS using selector - css

Question

I'm upgrading my company AngularJS project to Angular 8 thanks to ngUpgrade. So I have a hybrid application with both angularjs and angular components. I am also using an angular material template that provides SCSS files for both angular and angularjs.
My problem is that I want to only use the ajs theme on ajs component and the angular theme on angular components (and they can also be nested).
I searched a way to apply only one global css when a specific class is applied and switch to another global css when another class is applied.
I cant really do css lazy loading in this case
Lets assume my app code looks like this :
<div class="theme-1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
I want to be able to switch between theme when a class theme-1 or theme-2 occurs.

Answer 1

you should use BEM approach for this and your code should be like this.
.theme-1 {
&__div1{...}
&__div2{...}
...
}
.theme-2 {
&__div2{...}
...
}
.theme-1,
.theme-2 {
/* Common Css */
&__div1{...}
&__div2{...}
...
}
so you can write classes like this now
<div class="theme-1__div1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2__div1">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1__div2">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
for BEM you can refer this link - http://getbem.com/naming/.
If you are still not clear, I can provide same code also.
Let me know if you have any doubt.

Answer 2

The solution in my case was to use encapsulation: shadowDow on my angular components. It allowed me to reset theme1 css and use only theme2 css.
I had t do lots of css tweaks (some angular material features doesn't work with shadowDom...) and an cant switch back to theme1, but it has been the best solution so far.