Vuetify 文本字段边框缺失答案

【问题标题】：Vuetify text field border missingVuetify 文本字段边框缺失
【发布时间】：2017-08-08 23:57:14
【问题描述】：

我正在尝试实现 Veutify 的 text field

这就是我现在的样子：

这是文本字段处于焦点时的样子：

这些是我在 main.js 中的导入

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);

我错过了导入还是什么？

【问题讨论】：

CSS 导入在哪里？理想情况下，您应该使用浏览器的开发者工具来检查元素的样式
@Phil 我删除了它，因为添加 import 'vuetify/dist/vuetify.min.css'; 没有做任何事情。在我的浏览器的 CSS 样式中似乎没有任何与 border 边框相关的内容。
我认为它使用 box-shadow 作为下划线。将您的元素与他们的示例/演示页面中的元素进行比较
@Phil 我发现的唯一区别是 transitions。 example 与 mine

标签： vue.js vue-component vuetify.js

【解决方案1】：

我遇到了同样的问题，您需要将您的应用程序包装在 <v-app> 中。

原因是边框的颜色取决于您使用的主题。如果您尝试检查文档，您会看到边框的规则类似于.application--light .input-group .input-group__details：application--light 确实是v-app 添加的类。

【讨论】：

不工作。我将 App.vue（主要组件）包裹在中。还是不行。
@Soorya 我的问题是我在主题配置中使用了自定义 js 颜色并写了export default { primary: 'rgb(...)'}。 js 不支持rgb() 调用，它只是应用白色作为原色。如果是这种情况，请切换到十六进制颜色

【解决方案2】：

同样的问题但我通过这个解决方案修复了。请将此链接（CDN）添加到您的 html 文件中。

<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">


<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>

别担心没有崩溃。

【讨论】：