如何调整CodeMirror 6自动补全弹窗为浅色样式

CodeMirror 6的样式体系依赖CSS变量和精确选择器，直接修改.cm-hints（这是CM5的类）或单独的.cm-tooltip类无效，是因为优先级不够或类名匹配错误。以下是可行的解决方案：

方法一：使用官方推荐的CSS变量（优先） #

CodeMirror 6内置了控制提示框样式的CSS变量，修改这些变量可以全局或局部覆盖主题样式，无需担心优先级问题：

/* 全局作用（放到全局样式文件中） */
:root {
  /* 提示框背景色 */
  --cm-tooltip-background: #ffffff;
  /* 提示框边框颜色 */
  --cm-tooltip-border-color: #e5e7eb;
  /* 提示框阴影 */
  --cm-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* 选中补全项的背景色 */
  --cm-completion-highlight: #f3f4f6;
  /* 补全项文本颜色 */
  --cm-tooltip-color: #1f2937;
}

/* 仅作用于特定编辑器容器（如果需要局部修改） */
.your-editor-container {
  --cm-tooltip-background: #ffffff;
  --cm-tooltip-border-color: #e5e7eb;
}

方法二：使用高优先级选择器覆盖样式 #

如果变量修改不生效（比如使用了第三方主题强制覆盖），可以用更精确的选择器锁定提示框元素：

/* 锁定自动补全提示框 */
.cm-editor .cm-tooltip.cm-tooltip-autocomplete {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 选中的补全项样式 */
.cm-editor .cm-tooltip.cm-tooltip-autocomplete .cm-completionItem.cm-completionItem-selected {
  background-color: #f3f4f6;
}

/* 补全项文本样式 */
.cm-editor .cm-tooltip.cm-tooltip-autocomplete .cm-completionItem {
  color: #1f2937;
}

关键说明 #

1. 类名差异：.cm-hints是CodeMirror 5的类名，CM6中自动补全提示框使用的是.cm-tooltip-autocomplete，配合.cm-tooltip使用。
2. 优先级：必须将选择器嵌套在.cm-editor下，才能覆盖主题自带的样式（主题样式通常也是基于.cm-editor的嵌套选择器）。
3. 框架样式隔离：如果使用React/Vue等框架的CSS隔离方案（如CSS Modules），需要确保样式作用到全局，或者使用:global()包裹选择器。

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