In my Next.js application, I am using the Cytoscape Context Menus library. I see that there's built-in functionality through menuItemClasses and contextMenuClasses to add styling to both menus and submenus; however, I would like to add styling only to a submenu and not the menu. I have tried moving menuItemClasses and contextMenuClasses to inside where the submenu is being defined, but that does not work. Is it even possible to only style a submenu and not the menu? If so, could you please explain how this can be done.

In addition, I would like to style the options within the submenu so that only part of the content is bolded. In my case, the content that is being displayed as options in the submenu are key-value pairs, being structured as ${x}: ${y}. I only want what is being passed into x to be bolded (e.g., key: value). Is this possible to do? If so, I'd really appreciate it if it can be explained how to be done. I've included my code below:

Code:

let submenuItems = [];

function Object(x, y) {
    this.id = x;
    this.content = `${x}: ${y}`;
    this.tooltipText = `${x}: ${y}`;
    this.onClickFunction = () => {
        testFunction(x, y)
    };
};

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            submenu: [],
        },
    ],
};

let instance = cyRef.current.contextMenus(options);

cyRef.current.on('cxttap', "node", function(evt) {
    for (const variable in evt.target.data('properties')) {
        submenuItems.push(new Object(variable, evt.target.data('properties')[variable]));
    }

    instance.appendMenuItems(submenuItems, "three");
}

FWIW, I am using Cytoscape Context Menus v4.1.0.