How to remove the thin blue border? about react-simple-code-editor HOT 3 CLOSED

That's browser's focus outline. You can remove it by applying outline: 0 to the textarea, but make sure to have alternate styling for focus if you want your site to be successful.

Example:

.editor textarea {
  outline: 0;
}

from react-simple-code-editor.

Thanks for your help.

from react-simple-code-editor.

In case it helps anybody... I ran across a similar issue (my border was orange in Electron instead of blue). Here is the CSS I used to make the border consistent with other MUI controls:

.code-editor {
    outline: none;
    border: 1px !important;
    border-color: #444;
    border-width: 1px;
    border-radius: 4px;
    border-top-style: solid !important;
    border-bottom-style: solid !important;
    border-left-style: solid !important;
    border-right-style: solid !important;
}

.code-editor:focus {
    border-color: #90CAF9;
}

The !important after "border" is there because there is a "border: 0" added to the textarea when the library is rendering it.

To make this work you have to add a class to the editor's textarea:

          <Editor
            autoFocus
            padding={10}
            textareaClassName='code-editor'
            value={body ?? ""}
            style={{
              height: '400px',
              fontFamily: 'monospace'
            }}
            highlight={code => processHighlight(code)}
            onValueChange={updateBody}
          />

from react-simple-code-editor.