Vuetify 的文本字段没有下划线

Question

我正在尝试使用 vuetify 的文本字段。它看起来像这样：

应用焦点后看起来像这样：

我已阅读此内容，但我的应用程序包含在 v-app 中。还有什么我可以尝试的吗？

提示：深色主题对我也不起作用，但例如，我可以使用类像 "red"、"text--red" 来应用颜色。

证明，下面涉及v-app：

编辑：我也尝试用 v-content 包装它，但没有帮助。

<v-app>
  <v-content>
    <router-view></router-view>
  </v-content>
</v-app>

Answer 1

我通过删除

修复了它

<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

来自 index.html，并添加

import '../node_modules/vuetify/dist/vuetify.min.css';

到main.js文件。

不知道为什么它起作用了。

Answer 2

unpkg.com links 到最新版本的 vuetify，目前是 0.17.0。要从 unpkg 使用 0.16.9 css 你必须使用这个 link: https://unpkg.com/vuetify@0.16.9/dist/vuetify.min.css

Answer 3

在我的例子中，修复是将 margin-bottom 1px 添加到输入元素。希望对你有帮助。

Text field from Vuetify has no underline