材质：MdDialogPrompt无法正确显示

Question

这就是我所看到的：

这是CSS问题吗？

我有这样导入的CSS：

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

在我的src/main.js/文件中。

不确定为什么无法正确显示。

这是我的组件代码（src/components/NicknamePrompt.vue）：

<template>
    <div>
        <md-dialog-prompt
            v-model="nickname"
            :md-active.sync="active"
            md-title="Enter a nickname"
            md-input-maxlength="30"
            md-input-placeholder="Nickname..."
            md-confirm-text="Done"
        />
        <md-button
            class="md-primary md-raised"
            @click="active = true"
        >
            Set Nickname
        </md-button>
        <span v-if="nickname">Nickname: {{ nickname }}</span>
    </div>
</template>

<script>
export default {
    name: 'NicknamePrompt',
    data: () => ({
        active: false,
        nickname: null
    })
}
</script>

<style scoped>
</style>

这是我的src/main.js文件：

import Vue from 'vue'
import VueMaterial from 'vue-material'
import VueSocketIO from 'vue-socket.io'

import App from './App.vue'
import store from './store'
import router from './router'

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

Vue.use(VueMaterial)

const connectionUrl = 'http://lizardgizzards.com:' + process.env.VUE_APP_PORT

Vue.use(new VueSocketIO({
    debug: true,
    connection: connectionUrl,
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    },
    options: { }
}))

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')