Vue Материал MD-Input отличается от примера

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> тега

В соответствии с документацией , удаляя некоторые вещи для вашего случая использования, вы должны иметь как минимум следующее, обернутое вокруг этих <md-field> тегов.

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