尽管光标位于行首，但 react-monaco-editor 文本仍会出现在编辑器的中间

Question

我创建了一个简单的 React 应用程序来尝试使用react-monaco-editor. 这是我的代码。

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;

出于某种原因，编辑器中的文本显示在中间，我的光标按预期作为行首。

这是问题的屏幕截图。

Answer 1

这可能是一个老问题，但在默认 App.css 中的 React 中有一行将 text-align 设置为居中。如果它看起来与此类似：

.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;
}