如何自定义Ace Editor自动补全弹窗的样式？

方法一：直接覆盖内置CSS类 #

Ace Editor的自动补全弹窗有固定的CSS类名，你可以通过自定义CSS来覆盖这些类的样式，实现视觉定制：

/* 定制弹窗容器样式 */
.ace_autocomplete {
  border: 2px solid #3498db;
  border-radius: 6px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px 0;
}

/* 定制单个补全选项的基础样式 */
.ace_completion-item {
  padding: 6px 12px;
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
}

/* 定制选中状态的选项样式 */
.ace_completion-item.ace_selected {
  background-color: #3498db;
  color: #ffffff;
}

/* 定制选项中匹配文本的高亮样式 */
.ace_completion-highlight {
  color: #e74c3c;
  font-weight: 600;
}

方法二：给特定补全项添加自定义类 #

如果需要针对某些特定的补全选项做差异化样式，可以在自定义补全提供者中为选项指定className字段：

// 自定义补全提供者
const customCompleter = {
  getCompletions: function(editor, session, pos, prefix, callback) {
    callback(null, [
      {
        value: 'customFunction',
        meta: '自定义工具函数',
        className: 'custom-completion-item' // 自定义类名
      },
      {
        value: 'defaultMethod',
        meta: '默认方法'
      }
    ]);
  }
};

// 注册自定义补全器
editor.completers = [customCompleter];

然后为这个自定义类添加样式：

.custom-completion-item {
  background-color: #e8f4f8;
  border-left: 3px solid #2980b9;
}

方法三：调整弹窗基础配置（辅助样式） #

部分弹窗的行为和基础尺寸可以通过Ace的配置项调整：

editor.setOptions({
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  // 设置弹窗最大显示行数（间接控制高度）
  maxLines: 12,
  // 关闭弹窗的自动宽度适配，自定义宽度
  autoScrollEditorIntoView: false
});

注意：如果自定义CSS不生效，可通过增加选择器优先级（比如加上编辑器容器的类名）或临时使用!important（尽量避免）来覆盖内置样式。

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