Vue Material md-输入与示例不同

Question

我想在我的应用程序中使用vue材料，我已经在我的应用程序中安装了vue-material，并在我的main.js中执行以下操作：

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

但是，当我在我的索引页面中使用vue-material中的某些组件时，如下所示：

<template>
   <md-field>
    <label>Username</label>
    <md-input v-model="username"></md-input>
   </md-field>
   <md-field>
    <label>Password</label>
    <md-input v-model="password"></md-input>
   </md-field>
</template>

我的页面显示：

​

​

当我在codepen中访问示例表单输入时，表单输入应该如下所示：

​

​

我的代码出了什么问题？

Answer 1

这也发生在我身上，

要修复它，你只需要为你的应用程序设置一个主题，如下所示：

import 'vue-material/dist/theme/default.css'

Answer 2

您可能缺少一个重要的<form>标记

根据documentation，为您的用例删除一些内容，您至少应该将以下内容包装在这些<md-field>标记周围。

<form class="md-layout">
  // your form inputs here
</form>