Element-plus消息框显示不正常解决方案

Element-plus消息框显示不正常解决方案

不知道问题出现在哪里，反正就是点击按钮并没有在页面上弹出对应的框，而是在某个角落显示，经常遇到，老是忘记怎么写，记录一下解决方案

// import './assets/main.css'
import '@/styles/index.scss'
import "element-plus/theme-chalk/el-message-box.css"; 
import "element-plus/theme-chalk/el-message.css"; 

import {
    
     createApp } from 'vue'
import {
    
     createPinia } from 'pinia'

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

import {
    
     mixin } from './utils/mixin'

const app = createApp(App)

app.provide('mixin', mixin)

app.use(createPinia())
app.use(router)

app.mount('#app')

关键代码就2行：
import "element-plus/theme-chalk/el-message-box.css";
import "element-plus/theme-chalk/el-message.css";
在main文件中引入message和message-box对应的样式文件就可以了，我怀疑这是由于局部引入时没有引入样式文件造成的