如何实现react-monaco-editor的响应式布局？

我之前在项目里也踩过这个坑，react-monaco-editor默认的固定宽高确实不太友好，而且内联样式的优先级很高，直接用flex覆盖容易失效。下面给你一套亲测有效的解决方案，分步骤来：

第一步：移除组件的固定宽高属性 #

先把代码里的width="1200"和height="600"删掉，这些内联样式会优先于你的CSS，导致后续样式覆盖无效。修改后的组件代码：

<MonacoEditor 
  language="typescript" 
  theme="vs-dark" 
  defaultValue="//type your code here" 
  value={code} 
  options={options} 
  onChange={this.onChange} 
  editorDidMount={this.editorDidMount} 
  className='editor1' 
/>

第二步：配置编辑器的自动布局选项 #

在你的options对象里加上automaticLayout: true，这是Monaco编辑器自带的自动适配容器尺寸的开关，开启后编辑器会在容器大小变化时自动重新布局：

const options = {
  automaticLayout: true, // 关键配置，一定要加！
  // 你的其他配置项...
};

第三步：用CSS强制覆盖容器样式 #

接下来需要通过CSS覆盖编辑器容器和内部元素的默认样式，确保它们能继承父容器的尺寸。这里分两种场景给你方案：

场景1：编辑器作为flex布局的一部分（比如侧边栏+编辑器的布局） #

假设你的编辑器被包裹在一个flex容器里，比如：

<div class="app-layout">
  <div class="sidebar">侧边栏</div>
  <div class="editor-wrapper">
    <MonacoEditor className='editor1' ... />
  </div>
</div>

对应的CSS：

/* 父级flex布局容器 */
.app-layout {
  display: flex;
  width: 100%;
  height: 100vh; /* 占满整个视口高度 */
}

/* 编辑器的直接父容器 */
.editor-wrapper {
  flex: 1; /* 占据剩余所有空间 */
  min-width: 300px; /* 防止缩得太小影响体验 */
}

/* 覆盖react-monaco-editor的容器样式 */
.editor1 .react-monaco-editor-container {
  width: 100% !important;
  height: 100% !important;
}

/* 覆盖内部Monaco编辑器的样式 */
.editor1 .react-monaco-editor-container .monaco-editor {
  width: 100% !important;
  height: 100% !important;
}

场景2：编辑器自适应视口大小 #

如果想让编辑器直接占满大部分视口，同时保留最大/最小尺寸限制，可以用视口单位：

.editor1 .react-monaco-editor-container {
  width: 90vw !important; /* 占视口宽度的90% */
  height: 75vh !important; /* 占视口高度的75% */
  max-width: 1400px; /* 限制最大宽度，避免大屏下太宽 */
  min-width: 320px; /* 限制最小宽度 */
  margin: 0 auto; /* 水平居中 */
}

.editor1 .react-monaco-editor-container .monaco-editor {
  width: 100% !important;
  height: 100% !important;
}

为什么之前的flex方案失效？ #

之前你用.react-monaco-editor-container { flex: 2; }没效果，主要有两个原因：

1. 组件本身的内联width/height优先级更高，CSS无法覆盖；
2. 没有开启automaticLayout，即使容器尺寸变了，编辑器内部也不会重新计算布局。

按上面的步骤来，应该就能完美实现响应式效果了！

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