如何为Monaco Editor的代码建议框添加内边距？

最近我一直在折腾Monaco Editor，想给用户输入时弹出的代码建议框调整内边距，让样式更贴合产品需求。试了Monaco自带的主题配置，发现这类细节样式根本没法通过主题设置搞定，后来索性直接用CSS选择器来解决问题了。

其实思路很简单，就是通过Monaco生成的DOM元素类名来精准定位建议框，然后用自定义CSS覆盖默认样式就行。比如：

如果你是用普通CSS写，可以这样：

/* 给整个建议框容器添加上下内边距 */
.monaco-editor .suggest-widget {
  padding: 8px 0;
}

/* 给每一条建议项添加上下左右内边距，优化项内的排版 */
.monaco-editor .suggest-widget .monaco-list-row {
  padding: 6px 12px;
}

要是你和我一样用cva这类工具来管理样式，也可以这么写：

export const editorStyles = cva([
  'monaco-editor-container',
  // 用嵌套选择器给建议框容器加内边距
  '[&_.monaco-editor_.suggest-widget]:py-2',
  // 给单个建议项调整内边距
  '[&_.monaco-editor_.suggest-widget_.monaco-list-row]:px-3 py-1.5'
])

需要注意的是，Monaco的DOM结构是动态生成的，所以一定要用它自带的这些类名来定位元素，不然样式可能不会生效。亲测这种方法比主题配置灵活多了，各种细节样式都能调整~

备注：内容来源于stack exchange，提问作者lucasgelfond