Javascript 尽管光标位于行的开头，但编辑器文本仍显示在编辑器的中间

我创建了一个简单的react应用程序来尝试使用

react编辑器

。这是我的密码

import React, { Component } from 'react';
import MonacoEditor from 'react-monaco-editor';
import './App.css';

const code = `
import React from "react";

class App extends React.Component {
    render() {
        return (
            <span>I mean really come one</span>
        );
    }
}

export default App;
`;

class App extends Component {

  onChange = (value) => {
    console.log(value);
  }

  editorDidMount = (editor, monaco) => {
    console.log('editorDidMount', editor);
    editor.focus();
  }

  render() {
    const options = {
      selectOnLineNumbers: true
    };
    return (
      <div className="App">
        <MonacoEditor
          height="600"
          width="600"
          language="javascript"
          theme="vs-dark"
          value={code}
          onChange={this.onChange}
          editorDidMount={this.editorDidMount}
        />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“编辑器”导入MonacoEditor；
导入“/App.css”；
常量代码=`
从“React”导入React；
类应用程序扩展了React.Component{
render（）{
返回(
我是说真的有一天
);
}
}
导出默认应用程序；
`;
类应用程序扩展组件{
onChange=（值）=>{
console.log（值）；
}
EditordMount=（摩纳哥编辑）=>{
log（'editorddmount'，editor）；
editor.focus（）；
}
render（）{
常量选项={
SelectOnlineNumber:true
};
返回(
);
}
}
导出默认应用程序；

由于某种原因，编辑器中的文本显示在中间，并且我的光标是按预期的行开始。

以下是该问题的截图

---

这可能是一个老问题，但在默认App.css中的React中有一行将文本对齐到中心。 如果与此类似：

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}

您只需删除此部分：

.App {
  text-align: center;
}

---

伟大的你节省了我的时间：）