为什么设置CSS后CodeMirror组件的高度没有发生变化？

问题根因 #

高度不生效由两个常见原因导致：

• 配置项viewportMargin: Infinity和固定高度需求冲突：该配置的作用是让CodeMirror自动撑开高度适配全部内容，优先级高于自定义的固定高度样式，只要保留该配置，手动设置的高度不会生效。
• 样式未正确作用到CodeMirror渲染的内部DOM：CodeMirror组件渲染时会生成内部带有.CodeMirror类名的真实DOM，如果你当前组件的style标签添加了scoped属性，常规写法的样式无法穿透到子组件内部，会导致样式不生效。

解决步骤 #

1. 首先删除cmOptions中的viewportMargin: Infinity配置：

cmOptions: {
      mode: "application/json",
      lineNumbers: true,
      lineWrapping: true,
      readOnly: true,
      matchBrackets: true,
    }

2. 正确添加高度样式：

• 若style无scoped属性，直接定义样式：

.CodeMirror {
  height: 1500px;
}

• 若style有scoped属性，使用深度选择器穿透样式：
  • Vue2 写法：

  /deep/ .CodeMirror {
    height: 1500px;
  }
  

  • Vue3 写法：

  :deep(.CodeMirror) {
    height: 1500px;
  }
  

验证方式 #

打开浏览器开发者工具，选中CodeMirror对应的DOM元素，查看height属性是否生效，如果存在被划掉的情况，可通过添加!important提高样式权重：

:deep(.CodeMirror) {
  height: 1500px !important;
}

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