如何在 NativeScript 中使用核心主题？答案

【问题标题】：How to use core theme in NativeScript?如何在 NativeScript 中使用核心主题？
【发布时间】：2019-11-28 00:23:32
【问题描述】：

我在 NativeScript 中制作了一个简单的表单，但我无法使用核心样式！

我想使用“带有简单边框且没有标签的输入” - 选项 4 用于 TextField，如 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>

【问题讨论】：

你能不能用你的 CSS 导入语句更新 OP。
我认为官方网站上的文件已经过时了。我在 github 上发现他们开始使用新的 CSS 系统。
您使用的是nativescript-theme-core 包还是作用域@nativescript/theme 包？ nativescript-theme-core 是一个测试版，稳定版在范围包下。您将导入以 compat 为后缀的 CSS 文件以使用基于 v1.x 的类名。

标签： nativescript nativescript-telerik-ui

【解决方案1】：

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

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

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

【讨论】：