[Bug] Custom theme is reset when another Monaco bundle is loaded

[kycutler]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

Not reproducible in the playground since it requires multiple bundles.

Minimal repro can be found here: kycutler/multiple-monaco-bug

1. Define a custom theme and create an editor instance
2. Load a different bundle that contains monaco and creates an editor instance
3. Notice that the theme in the first editor gets reset

Actual (Problematic) Behavior

Separate bundles containing monaco should not interfere with one another. This behavior limits the ability to depend on components that use monaco.

Expected Behavior

No response

Additional Context

No response

[kycutler]

This is caused by the rules in Monaco's global stylesheets overriding one another.

It would be great if the style selectors could be prefixed to make them more specific, e.g. .my-component .mtk1.

I can work around the issue by reaching into the stylesheet and modifying the rule selectors directly, but it would be much better if this was supported at the Monaco level.

[thisispvb]

I am running into a similar issue, I have a main editor mounted on the page (always visible) and a tabbed section underneath it that has a "compiled code" tab (mounts a second read-only instance when visible).

Everything works fine as long as one of these two conditions is true:

1. only one editor is mounted on the page
2. multiple editors mount simultaneously

Where it gets problematic is when the second Monaco instance gets mounted later on in the app lifecycle as it will revert all instances on the page back to the default theme (I double checked and they are still getting the custom theme prop passed in). I mitigated this for now by calling setTheme() on every re-render but even then the default theme flashes for a brief moment before the custom one gets applied again.

[ckorherr]

We also have a use case for multiple editors with varied background colors: the main editor is white, while a secondary one in a panel is light gray. I can adjust the CSS, but the minimap doesn't match the CSS color then.

[AmamiyaCx]

我遇到了类似的问题，我在页面上安装了一个主编辑器（始终可见），其下方有一个选项卡式部分，其中有一个“编译代码”选项卡（可见时安装第二个只读实例）。

只要满足以下两个条件之一，一切都会正常进行：

1. 页面上仅安装了一个编辑器
2. 多个编辑器同时挂载

出现问题的地方是当第二个 Monaco 实例稍后在应用程序生命周期中安装时，因为它将把页面上的所有实例恢复为默认主题（我仔细检查过，它们仍然在获取传入的自定义道具theme）。我现在通过调用setTheme()每次重新渲染来缓解这个问题，但即使这样，默认主题也会在再次应用自定义主题之前闪烁一小会儿。

Brother, have you solved this problem? I am still using the latest version and there is still a problem of using multiple editors that may cause theme coverage