如何在原生脚本中使用核心主题?

Question

我已经在NativeScript中制作了一个简单的表单，但我不能使用核心样式！

我想使用"具有简单边框且没有标签的输入" - TextField 的选项 4，如 https://docs.nativescript.org/ui/theme 官方文档中所述。

我将所有代码复制粘贴到我的项目中，但看起来根本没有使用 CSS。

因此，我刚刚启动了NativeScript Playground并将代码从文档复制粘贴到Playground中以检查它，但它不起作用。操场上的密码是。而且表单看起来不像是文档必须的。看起来没有使用 CSS 主题。我做错了什么？如何使用核心主题？

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Home">
</ActionBar>
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<StackLayout class="form">
<!-- Option 1: An input with no label, and a bottom border -->
<StackLayout class="input-field">
<TextField hint="Option 1" class="input" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<!-- Option 2: An input with a label on top, and a bottom border -->
<StackLayout class="input-field">
<Label text="Option 2"
class="label font-weight-bold m-b-5" />
<TextField class="input" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<!-- Option 3: An label and input—positioned side by side -->
<GridLayout class="input-field input-sides" rows="auto, auto"
columns="*,*">
<Label text="Option 3" class="label font-weight-bold"
row="0" col="0" />
<TextField class="input right" row="0" col="1" />
<StackLayout class="hr-light" row="1" colSpan="2">
</StackLayout>
</GridLayout>
<!-- Option 4: An input with a simple border and no label -->
<TextField hint="Option 4" class="input input-border" />
<!-- Option 5: An input with a rounded border and no label -->
<TextField hint="Input rounded"
class="input input-rounded m-t-10" />
</StackLayout>
</StackLayout>
</ScrollView>
</Page>

Answer 1

问题是由于 NativeScript Theme 1.0 到 2.0 的迁移。

当前版本的 NativeScript 使用主题 2，但文档描述的是版本 1。

位于 GitHub 的 NativeScript 主题 1.0 到 2.0 迁移指南： https://github.com/NativeScript/theme