How do I match a Page class in the components stylesheet?


#1

Hi,

I have Page with a css-class, lets call it fontscale-150.

In one of my components, I want to match this class so I can style another class, if that class is set on the Page.
I might want to add some more padding to one of the built-in classes in nativescript-theme-core, but only for this component.

So I want to do something like this:

Page.fontscale-150 .p10 {
  padding: 15;
}

Angular components styles are encapsulated, so that doesn’t work.
Is there a way to write a css-selector in my component css that would work?

I’ve tried:

/deep/ Page.fontscale-150 .p10
/deep/ .fontscale-150 .p10
:host Page.fontscale-150 .p10
:host .fontscale-150 .p10

Non of them worked.

I don’t want to add it to my app.css, since this is only mean for a single component and therefor shouldn’t be in the global style.