Angular 12中如何修改ngx-monaco-editor的背景颜色？

一、自定义主题不生效（编辑器始终显示vs默认主题）解决步骤 #

• 修正包依赖不一致问题：你当前组件内导入的是@materia-ui/ngx-monaco-editor的加载服务，但AppModule中引入的是基础版ngx-monaco-editor，两个包加载逻辑不兼容，统一使用@materia-ui/ngx-monaco-editor的话，AppModule的导入语句修改为：

import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';

• 修正AppModule imports数组语法错误：你当前代码里imports提前闭合了方括号，修正为：

imports: [
  // 其他已有导入
  MonacoEditorModule.forRoot()
],

• 主题定义完成后主动触发切换：monaco定义自定义主题后不会自动生效，需要手动调用setTheme方法，同时将editorOptions的赋值移到主题加载完成后，避免初始加载时找不到自定义主题 fallback 到默认主题。
  修改后的component1.ts核心代码示例：

export class component1 implements OnInit {
  editorOptions = {};
  code = "xml stuff goes here";

  constructor(private dataMapService: DataMapService, private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$.subscribe(() => {
      const monaco = (window as any).monaco;
      monaco.editor.defineTheme('myCustomTheme', {
        base: 'vs-dark',
        colors: {
          "editor.background": '#AA4A44',
          'editorCursor.foreground': '#002438',
          'editor.lineHighlightBackground': '#9B9B9B',
          'editorLineNumber.foreground': '#666666',
          'editor.selectionBackground': '#666666',
          'editor.inactiveSelectionBackground': '#7e890b'
        }
      });
      // 主动设置主题生效
      monaco.editor.setTheme('myCustomTheme');
      // 赋值编辑器配置
      this.editorOptions = {theme: 'myCustomTheme', language: 'xml'};
    });
   }

  ngOnInit(): void {}
}

• 应急CSS覆盖方案：如果不需要自定义完整主题，仅修改背景色，可以直接在组件样式中添加如下代码绕过主题配置：

::ng-deep #xmlDisplayer .monaco-editor,
::ng-deep #xmlDisplayer .monaco-editor .margin {
  background-color: #AA4A44 !important;
}

二、monaco命名空间报错解决步骤 #

• 安装类型依赖：执行命令安装monaco-editor核心包和类型声明
  npm install monaco-editor @types/monaco-editor -D
• 添加全局类型声明：在项目的typings.d.ts（没有就新建）中添加如下代码，就不需要每次调用时写(window as any)：

declare var monaco: typeof import('monaco-editor');

• 全局统一加载逻辑：推荐将主题定义逻辑放在AppComponent中执行，全局仅定义一次，所有组件都可以使用，避免重复定义报错。

内容的提问来源于stack exchange，提问作者Blake