How to change the RadDataForm style in nativescript-vue ? (Nativescript-Vue) - nativescript

Question

How to change font-size, border-color e.t.c styling of email and password present in the person object.
<RadDataForm :source="person"</RadDataForm>

Answer 1

Here seems to be a perfect example you are looking, use TKPropertyEditorStyle to define custom font, size, color etc.,
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<RadDataForm ref="dataForm" :source="person">
<TKEntityProperty v-tkDataFormProperty name="name">
<TKPropertyEditor v-tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle v-tkPropertyEditorStyle
labelTextColor="red"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty v-tkDataFormProperty name="age">
<TKPropertyEditor v-tkEntityPropertyEditor type="Decimal">
<TKPropertyEditorStyle v-tkPropertyEditorStyle
labelTextColor="green"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty v-tkDataFormProperty name="birthDate">
<TKPropertyEditor v-tkEntityPropertyEditor type="DatePicker">
<TKPropertyEditorStyle v-tkPropertyEditorStyle
labelTextColor="blue"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
</RadDataForm>
</Page>
</template>
<script>
import Vue from "nativescript-vue";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
export default {
data() {
return {
person: {
name: "John",
age: 23,
birthDate: "1993-05-16"
}
};
}
};
</script>