无法更改@monaco-editor/react 中的主题

Question

我试图更改@monaco-editor/react 的主题，但我无法这样做。 开发的时候主题是变化的，但是刷新页面后就无法更改主题，变成默认主题了

import React, { useEffect, useRef, useState } from "react";
import axios from "axios";
// import MonacoEditor from "react-monaco-editor";
import Editor, { useMonaco } from "@monaco-editor/react";

//^ @themes
import { nightOwl } from "./style";

import "./Code.css";
import { c } from "./defaultCode";

const Code = () => {
  const monaco = useMonaco();
  const monacoRef = useRef(null);
  const [code, setCode] = useState(c);
  const [output, setOutput] = useState("Output");
  const [input, setInput] = useState("");
  const [isEditorReady, setIsEditorReady] = useState(false);

  const [outputLoading, setOutputLoading] = useState(false);

  const state = {
    code: c.c,
    result: "Submit Code to See Result",
    lang: "c",
  };

  const submitHandler = async (e) => {
    setOutputLoading(true);
    try {
      const { data } = await axios({
        method: "post",
        url: "http://localhost:5000/code",
        data: {
          code: code,
          input: input,
          lang: "c",
        },
      });
      // console.log(data, "<=data");

      if (data.error) {
        setOutput(data.error);
      } else {
        setOutput(data.output);
      }

      setOutputLoading(false);
    } catch (err) {
      console.log(err);
      setOutputLoading(false);
    }
  };

  const updateCode = (newCode, e) => {
    setCode(newCode);
  };

  const inputHandler = (e) => {
    setInput(e.target.value);
  };

  function handleEditorDidMount(editor, monaco) {
    monaco.editor.defineTheme("my-theme", nightOwl);
    monacoRef.current = editor;
    setIsEditorReady(true);
  }

  useEffect(() => {
    if (monaco) {
      console.log(monaco);
      monaco.editor.defineTheme("my-theme", nightOwl);
    }
  }, [monaco]);

  return (
    <>
      {/* <div className="filter" /> */}
      <header>
        <div className="header_container">
          <h1>Code</h1>
          <button onClick={submitHandler} id="run">
            Run
          </button>
        </div>
      </header>
      <div className="__code">
        <div className="left">
          <Editor
            id="code"
            width="80vw"
            height="90vh"
            // theme="vs-dark"
            theme="my-theme"
            smooth="2"
            options={{
              minimap: {
                enabled: false,
              },
              fontSize: 14,
              cursorStyle: "block",
              wordWrap: "on",
            }}
            value={code}
            onChange={updateCode}
            language={state.lang}
            editorDidMount={handleEditorDidMount}
          />
        </div>
        <div className="right">
          {outputLoading ? (
            <textarea
              name="outputLoad"
              id="output"
              cols="30"
              rows="7"
              data-gramm_editor="false"
              spellCheck="false"
              readOnly={true}
              value="Loading ..."
            ></textarea>
          ) : (
            <textarea
              name="output"
              id="output"
              cols="30"
              rows="7"
              data-gramm_editor="false"
              spellCheck="false"
              readOnly={true}
              value={output}
            ></textarea>
          )}
          <textarea
            name="input"
            id="input"
            cols="30"
            rows="7"
            data-gramm_editor="false"
            spellCheck="false"
            value={input}
            onChange={inputHandler}
            placeholder="Input"
          ></textarea>
        </div>
      </div>
    </>
  );
};

export default Code;

我尝试使用 useEffect 下的 useMonaco 钩子来解决这个问题，但它仍然无法正常工作。 请帮我解决这个问题。

Answer 1

你可以这样做

<Editor
  beforeMount={setEditorTheme}
/>

function setEditorTheme(monaco: any) {
  monaco.editor.defineTheme('onedark', {
    base: 'vs-dark',
    inherit: true,
    rules: [
      {
        token: 'comment',
        foreground: '#5d7988',
        fontStyle: 'italic'
      },
      { token: 'constant', foreground: '#e06c75' }
    ],
    colors: {
      'editor.background': '#21252b'
    }
  });
}

您可以通过查看 One Dark、Dracula 等开源主题来搜索相关代币 例如这个https://github.com/Binaryify/OneDark-Pro/blob/master/themes/OneDark-Pro-darker.json

Answer 2

答案在editor.api.d.ts:

    /**
     * Define a new theme or update an existing theme.
     */
    export function defineTheme(themeName: string, themeData: IStandaloneThemeData): void;

    /**
     * Switches to a theme.
     */
    export function setTheme(themeName: string): void;

您必须致电

setTheme

激活您的主题。

defineTheme

和

setTheme

都是全局 Monaco 函数，不特定于特定的编辑器实例。因此，在每次挂载操作时调用它们是没有意义的。而是在应用程序启动时调用它们，并且仅在您更改主题时调用它们。