react-monaco-editor 文本出现在编辑器中间，尽管光标位于行首答案

【问题标题】：react-monaco-editor text appears in middle of editor despite cursor being at the start of linereact-monaco-editor 文本出现在编辑器中间，尽管光标位于行首
【发布时间】：2019-01-18 15:38:55
【问题描述】：

我创建了一个简单的反应应用程序来尝试使用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;

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

这是问题的截图。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这可能是一个老问题，但在默认 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;
}

【讨论】：

太棒了。你节省了我的时间:)