Electron 中 Monaco 编辑器的奇怪风格问题答案

【问题标题】：Strange style issues with Monaco Editor in ElectronElectron 中 Monaco 编辑器的奇怪风格问题
【发布时间】：2022-01-07 16:51:44
【问题描述】：

当我按照 electron-amd-sample 在我的 Electron 应用程序中嵌入 Monaco 编辑器时，编辑器的行为符合预期。

但是，该示例演示了在 HTML 页面中的脚本标记内实例化编辑器，而我想在我的项目 Javascript 文件中访问编辑器。

我将以下代码添加到 JS 文件中以实例化编辑器，并观察到编辑器的一些奇怪的样式问题：

当我点击滚动菜单时，它变成白色而不是有一点透明度：
当我单击 go-to-references 时，窗口出现然后开始缩小直到消失：

请注意，我已经为现在嵌入编辑器的页面定义了其他 css，而它之前是在隔离的浏览器窗口中运行的。不过，我不确定如何判断这是否是一个问题。

/**
 * Sets up the Monaco code editor and links it to the code container div.
 *
 * @returns a Promise and passes the editor to resolve.
 */
async function setupMonacoEditor() {
    return new Promise((resolve, reject) => {
        amdRequire(['vs/editor/editor.main'], function () {
            const editor = monaco.editor.create(
                document.getElementById('ideCodeContainer'),
                {
                    language: 'javascript',
                    theme: vs-dark,
                    automaticLayout: true,
                }
            );
            resolve(editor);
        });
    });
}

【问题讨论】：

标签： javascript css electron monaco-editor

【解决方案1】：

原来有两个问题：

我定义了一个 css 类 .active，太通用了，与滚动菜单的颜色冲突。
设置

webFrame.setZoomFactor(Math.min(0.00104058272 * height, 0.00059523809 * width));

在电子内导致参考窗口的大小调整。

【讨论】：