reactjsmonaco-editor

How to style monaco editor context menu

I need to change the css style of the default context menu but I couldn't inspect the classes because it's closed when it out of focus, so if any one knows the classes or know how to adjust the style using javascript can help.

Solution

  • Press F12 to show the console. Input the code and press enter.

    setTimeout(() => {debugger;}, 1000);

    You may open the context menu in 1 second before the browser paused. Then you can inspect the element.

    .monaco-menu > .monaco-action-bar.vertical {
  color: red !important;
}

    But since 0.12 the context menu is under shadow-root and the there is no element declare part attribute. So in the host there is no way to rewrite the style.