Not picking the style when using className

[relez]

Hi there, I am creating Labels on the fly and I need to set a style to the Label, in my component, I import the css file but its not picking up the correct style, this is my code:

let title = new Label();
title.text = "My Title";
title.className = "font-16 my-title";
title.color = new Color("black");
container.addChild(title);

This is my css:

.phone :host .my-title {
    ...
}

Any idea? Thanks!

[NathanaelA]

I assume this is angular. If you have a label hard coded on the form does it pick it up?

[relez]

It does, but creating on the fly using classes like the code above it does not.

[NathanaelA]

This might be a limitation of Angular; have you tried the deep command also?

[NgxDev]

Not sure if my problem might have the same root cause, but if I have this in a component css:

:host-context(.android) {
  ::ng-deep {
    .segmented-bar {
      background: magenta;
    }
  }
}

and require('nativescript-platform-css'); in app.component.tns.ts (so, in the root component),
the first time I navigate to that component with the segmented bar, the bar does have a magenta background. But if I go back to the previous view and then navigate again to that component, then the bar doesn't have the magenta background anymore (of course, this is not limited to SegmentedBar, but to any element). And I have no clue why... I mean the plugin must have set the css class on the root component tag, right? which has been instantiated when the app launched... nothing should change there between routing.
And the css rules that are set in global stylesheets work fine though, the problem is only with css rules written in the component specific css file.

[justinrunes]

Any resolution to this? I am currently having the same problem.