Nuxt.js/Vue.js项目中textarea使用CodeMirror后样式失效如何解决

• 首先排查样式匹配问题
  如果你的Vue/Nuxt项目的单文件组件中style标签添加了scoped属性，常规的.CodeMirror类选择器无法匹配第三方组件生成的内部DOM，需使用框架提供的深度选择器：

  • Vue2 写法：在选择器前添加/deep/ 前缀
  • Vue3 写法：用:deep()包裹目标类名，例如:deep(.CodeMirror)
    你之前使用多层级选择器依然无效，大概率是受scoped属性影响，优先使用深度选择器即可，不需要写冗余的层级匹配。

• 修正CSS配置
  你之前添加的overflow: hidden是错误配置，会直接拦截容器的滚动行为，替换为以下样式即可：

/* scoped场景下按需添加深度选择器前缀 */
.CodeMirror {
  height: 78vh !important;
  width: 100% !important; /* 和原textarea宽度保持一致 */
  border: 1px solid black;
}
.CodeMirror-scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

• 调整CodeMirror初始化参数
  不要在初始化配置中将viewportMargin设置为Infinity，该配置会强制编辑器渲染全部内容、自动撑开容器高度，直接导致内部滚动失效，保持默认值即可，参考初始化代码：

import CodeMirror from 'codemirror'
// 绑定原textarea元素初始化
const editor = CodeMirror.fromTextArea(document.getElementById('你的textarea元素ID'), {
  mode: 'application/xml', // 按你的内容类型替换为json对应模式
  lineNumbers: true,
  viewportMargin: 10, // 保持默认值即可，禁止设置为Infinity
  // 其余自定义配置
})
// 初始化后调用refresh强制重绘，确保样式计算正确
editor.refresh()

• 动态内容适配
  如果存在用户输入后动态更新编辑器内容的场景，内容赋值后调用editor.refresh()即可避免高度计算异常。

内容的提问来源于stack exchange，提问作者BATMAN_2008