[lexical-react]: Add LexicalMenu styling to theme

[ivailop7]

Since removing the menuRenderFn from the LexicalMenu component to allow for refactoring of the rendering and positioning, removed some styling flexibility. This PR adds the following theme classes for the LexicalMenu in the react package:

  menu?: {
    container?: EditorThemeClassName;
    item?: EditorThemeClassName;
    itemSelected?: EditorThemeClassName;
    itemText?: EditorThemeClassName;
  };

this should provide enough flexibility to style completely the LexicalMenu using pure CSS.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
lexical	Ready	Preview	Comment	Nov 18, 2025 10:08pm
lexical-playground	Ready	Preview	Comment	Nov 18, 2025 10:08pm

[james-atticus]

Thanks for looking at this. Adding theming is good but doesn't quite meet the need where you have different styling for menus within the same editor.

As an example, we have a mentions typeahead menu and a text shortcuts typeahead menu with different styling. Currently we do this with menuRenderFn that constructs a container with a different class name on each. Eg:

.MentionsPlugin_typeahead-menu {
    width: 320px;
    max-height: 300px;
    overflow-y: auto;
}

.MentionsPlugin_typeahead-menu .item {
    color: var(--text-dark);
    font-size: var(--font-medium);
    font-weight: bold;
}

I've pushed another commit here on top of your change which adds a prop that would allow us to do this (doesn't look like I can open an PR into your fork).

[ivailop7]

Thanks for looking at this. Adding theming is good but doesn't quite meet the need where you have different styling for menus within the same editor.

As an example, we have a mentions typeahead menu and a text shortcuts typeahead menu with different styling. Currently we do this with menuRenderFn that constructs a container with a different class name on each. Eg:

.MentionsPlugin_typeahead-menu {
    width: 320px;
    max-height: 300px;
    overflow-y: auto;
}

.MentionsPlugin_typeahead-menu .item {
    color: var(--text-dark);
    font-size: var(--font-medium);
    font-weight: bold;
}

I've pushed another commit here on top of your change which adds a prop that would allow us to do this (doesn't look like I can open an PR into your fork).

thanks, gave you edit to my fork, you should be able to push to the branch.