How can I apply RadDatForm style with NS themes? - nativescript

Question

styling of RadDataForm is not working when using NS themes.
I have this in my scss:
#import "~#nativescript/theme/core";
First of all, the arrow for Picker is not showned. And any styling (TKPropertyEditorStyle) is ignored.
How can I continue to use themes and be able to style components at the same time?
Thanks.
Steps to reproduce:
> tns create bugng --template tns-template-drawer-navigation-ng
found 6 vulnerabilities (5 moderate, 1 high)
> npm audit fix
3 vulnerabilities required manual review and could not be updated
1 package update for 1 vulnerability involved breaking changes
> npm audit fix --force
> tns plugin add nativescript-ui-dataform
Then, in app.module.ts, added:
import { NativeScriptFormsModule } from "nativescript-angular/forms";
...
imports: [
...
NativeScriptFormsModule
]
Then, in home.module.ts, added:
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
...
imports: [
...
NativeScriptUIDataFormModule
]
In home.component.ts :
import { Component, OnInit, ViewChild } from "#angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
import { RadDataFormComponent } from "nativescript-ui-dataform/angular/dataform-directives";
#Component({
selector: "Home",
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
#ViewChild('myCommitDataForm', { static: false }) myCommitDataFormComp: RadDataFormComponent;
private _person: Person;
constructor() {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
this._person = new Person("John", 23, "john#company.com", -1);
}
onDrawerButtonTap(): void {
const sideDrawer = <RadSideDrawer>app.getRootView();
sideDrawer.showDrawer();
}
public onPropertyCommitted(args) {
console.log(args.propertyName);
if (this.myCommitDataFormComp.dataForm.editedObject) {
console.log(this.myCommitDataFormComp.dataForm.editedObject);
}
}
get person(): Person {
return this._person;
}
}
class Person {
constructor(public name: string, public age: number, public email: string, public city?: number) { }
}
In home.component.html :
<ActionBar>
<NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
<ActionItem icon="res://menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
ios.position="left">
</ActionItem>
<Label text="Home"></Label>
</ActionBar>
<GridLayout class="nt-form" rows="132,auto,auto,*">
<Image height="128" src="res://logo"></Image>
<Label row="1" class="page__content-placeholder" text="<!-- Page content goes here -->"></Label>
<RadDataForm row="2" #myCommitDataForm [source]="person" tkExampleTitle tkToggleNavButton commitMode="Immediate" (propertyCommitted)="onPropertyCommitted($event)">
<!-- >> angular-dataform-adjustment-html -->
<TKEntityProperty tkDataFormProperty name="name" displayName="Name" index="0">
<TKPropertyEditor tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#00695c" strokeWidth="2" fillColor="#4db6ac" labelHidden="false"
labelTextSize="18" ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light" labelFontStyle="Italic"
labelPosition="Top" labelTextColor="#00695c"></TKPropertyEditorStyle>
</TKPropertyEditor>
<TKNonEmptyValidator tkEntityPropertyValidators errorMessage="Username can't be empty."></TKNonEmptyValidator>
</TKEntityProperty>
<TKEntityProperty tkDataFormProperty name="age" displayName="Age" index="1">
<TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty tkDataFormProperty name="email" displayName="E-Mail" index="2">
<TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty tkDataFormProperty name="city" displayName="City" index="3" valuesProvider="Montreal, Quebec, Toronto" hintText="city">
<TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
<TKNonEmptyValidator tkEntityPropertyValidators errorMessage="City can't be empty."></TKNonEmptyValidator>
</TKEntityProperty>
</RadDataForm>
</GridLayout>