Monaco editor调用deltaDecorations修改指定范围样式却作用于全文如何解决

• 样式作用域/优先级问题修复
  如果你使用了CSS Modules（样式文件后缀为.module.css/.module.scss），直接传入字符串类名会和编译后的哈希类名不匹配，需要传入编译后的类名变量：

  // 顶部引入样式文件
  import styles from './你的样式文件路径.module.css';
  
  // 装饰配置处修改
  options: {
      inlineClassName: styles.myInlineDecoration,
  }
  

  如果使用全局普通样式，需要提升优先级避免被Monaco内置样式覆盖：

  .myInlineDecoration {
      background: lightgreen !important;
  }
  

• 无额外CSS的简化方案
  直接使用Monaco IModelDecorationOptions 内置的backgroundColor配置项，不需要自定义CSS类，可完全规避样式冲突问题：

  const editorDidMount = (editor, monaco) => {
      const r = new monaco.Range(1, 3, 1, 10);
      editor.deltaDecorations(
          [],
          [
              {
                  range: r,
                  options: {
                      backgroundColor: "lightgreen",
                  },
              },
          ]
      );
  };
  

• 范围参数排查
  Monaco Range构造参数顺序为(起始行号, 起始列号, 结束行号, 结束列号)，行号、列号均从1开始计数，若当前行文本长度小于设置的结束列号，装饰会自动截断到行末，不会作用到其他行区域。

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