如何在 React 中更改摩纳哥编辑器背景颜色

Question

我正在寻找更改摩纳哥编辑器的背景颜色。我将以下 monaco npm 包与 React 一起使用：Monaco React

有没有办法在下面的编辑器组件中执行此操作？我下面的选项对象工作得很好，所以希望对编辑器背景颜色做类似的事情。

我应该为此使用DefineTheme 函数吗？

这是我正在尝试运行的编辑器代码：

<Editor
        height="90vh"
        width="870px"
        language="javascript"
        line="2"
        options={{
          minimap: {
            enabled: false,
          },
          fontSize: 18,
          cursorStyle: "block",
          wordWrap: "on",
        }}
        defineTheme={{
          themeName: "my-theme",
          themeData: {
            colors: {
              "editor.background": "#000000",
            },
          },
        }}
        value={"// write your code here"}
        editorDidMount={handleEditorDidMount}
      />

Answer 1

有 2 个步骤可以实现您的目标

1. 使用自定义颜色定义您的自定义主题
2. 通知摩纳哥使用该主题

工作示例

https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors

如果您想在 React 中执行此操作，请在 ComponentDidMount (classComponent) 或 useEffect(featuredComponent) 中执行此操作，请使用 monaco 编辑器的定义主题界面定义自定义主题。

monaco.editor.defineTheme('my-theme', {
      base: 'vs',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#000000',
      },
});

然后在渲染编辑器组件时将“my-theme”作为主题属性传递给编辑器组件。

<Editor
   height="90vh"
   width="870px"
   language="javascript"
   theme="my-theme"
   line="2"
   options={{
     minimap: {
       enabled: false,
     },
     fontSize: 18,
     cursorStyle: "block",
     wordWrap: "on",
   }}
   value={"// write your code here"}
   editorDidMount={handleEditorDidMount}
/>

在您使用的 npm 存储库中，有一个预定义的附加主题可用。( night-dark)。其定义如下

{
    base: 'vs-dark',
    inherit: true,
    rules: [],
    colors: {
      'editor.background': '#202124',
    },
},