react-simple-code-editor 自定义CSS后滚动条失效，长代码内容被截断

我之前也踩过react-simple-code-editor滚动异常的坑，结合你给出的代码和问题描述，大概率是容器高度参照关系、样式优先级或者编辑器内部DOM结构的问题，咱们一步步来修复：

• 先确认父容器的高度设置
  你的.editor用了height: 100%，但如果它的父容器没有明确的高度值（比如height: 600px或者height: 100vh），这个百分比就没有参照对象，overflow: auto自然不会生效。先给编辑器的父容器加上固定高度或者占满视口的高度，比如：

  .editor-parent {
    height: 100vh;
    width: 100%;
  }
  

• 调整样式优先级，确保自定义CSS生效
  react-simple-code-editor自带的默认样式可能会覆盖你的自定义规则，你可以给.editor的overflow属性加上!important，或者用更具体的选择器（比如结合父容器类名）来提高优先级：

  .editor-parent .editor {
    overflow: auto !important;
  }
  

• 检查编辑器内部的DOM结构
  打开浏览器开发者工具（F12），看看react-simple-code-editor生成的实际DOM节点，确认你的.editor类是不是加在了最外层的滚动容器上。有时候编辑器会在内部生成textarea或者包裹用的div，如果你的样式没作用到正确的元素上，滚动自然失效。如果是这种情况，需要给内部的内容容器直接设置overflow: auto。

• 优化pre元素的样式
  你当前的.editor pre设置了min-height: 100%，可以再加上overflow-anchor: none来避免滚动时的内容跳动，同时确保pre能完整撑开内容高度，触发容器的滚动：

  .editor pre {
    margin: 0 !important;
    padding: 12px;
    min-height: 100%;
    white-space: pre;
    word-wrap: normal;
    box-sizing: border-box;
    overflow-anchor: none;
  }
  

• 尝试直接给内部textarea设置属性
  react-simple-code-editor允许通过textareaProps传递属性给内部的textarea组件，你可以直接给它加上滚动样式：

  <Editor
    // 其他属性
    textareaProps={{
      style: { overflow: 'auto' }
    }}
  />
  

按照上面的步骤调整后，应该就能解决长代码截断、滚动不生效的问题了。

内容来源于stack exchange