Material-UI 的 Button 组件在 Vue 里怎么用？为啥报错说找不到组件？

程序猿东昇提问于 2026-03-10 23:05:19 阅读 9

组件

我最近在 Vue 项目里想用 Material-UI 的 Button，但按照文档引入后页面直接报错，说“Unknown custom element:

Button按钮

我来解答赞 2 收藏

反馈

1 条解答

司空静怡 Lv1

兄弟，你踩坑了。MUI (Material-UI) 确实是 React 的库，不能直接在 Vue 里用。Vue 根本不认识这些 React 组件，所以报 "Unknown custom element"。

Vue 生态里对应的 Material Design 组件库是 Vuetify，想在 Vue 里用 Material Design 风格的按钮，直接换 Vuetify 就行。

安装：

npm install vuetify

npm install @mdi/font

main.js 里初始化：

import { createApp } from 'vue'

import App from './App.vue'

import Vuetify from 'vuetify'

import '@mdi/font/css/materialdesignicons.css'



const app = createApp(App)

app.use(Vuetify)



app.mount('#app')

然后组件里直接用：

标签是 v-btn 不是 Button，属性写法也有区别，不过用起来差不多。

如果你就想要 MUI 那种写感，Vuetify 是最接近的选择。别再跟 React 组件较劲了。

2026-03-10 23:14