Vue3 ElementPlus 与 md-editor-v3 样式冲突 作者：马育民 • 2026-05-23 17:26 • 阅读：10001 # 问题描述 ElementPlus + md-editor-v3，由于样式叠加，在预览时，会导致行间距加大 # 解决步骤一：引入样式顺序 **提示：**如果是在当前页面中引入 md-editor-v3 样式，一般不会受影响，可略过 下面导入样式要写在 导入 ElementPlus 的样式下面 ``` import { MdPreview } from 'md-editor-v3' import 'md-editor-v3/lib/style.css' ``` # 解决步骤二：修改样式 适用下面纯预览模式、编辑窗口的右侧预览窗口： ``` <MdPreview :model-value="message.content" previewTheme="vuepress" /> ``` ### 测试样式是否生效 下面样式是测试用，如果预览 **文字都变红色** 说明 **生效** ``` <style scoped> /*测试用，如果预览字体都变红色说明生效*/ :deep(.md-editor-preview *) { color: red !important; } </style> ``` ### 缩小行间距 ``` <style scoped> /* white-space 设置为默认值，换行符不会加大间距*/ :deep(.md-editor-preview) { white-space: normal !important; } /* 压缩标题段落默认边距 */ :deep(.md-editor-preview h3) { margin-top: 0.5em; margin-bottom: 0.3em; } :deep(.md-editor-preview p) { margin-top: 0; margin-bottom: 0.8em; } </style> ``` 原文出处：http://www.malaoshi.top/show_1GW3MdYBbNRw.html