How can I add styling only to a submenu?

[lilfrootyloops]

Description:

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:

memoizedCytoscapeComponent.jsx

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: [],
        },
    ],
    menuItemClasses: ['custom-menu-item']
};

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");
}

globals.css

.custom-menu-item > * {
    font-weight: bold !important;
}    

Additional Context I am using Cytoscape Context Menus v4.1.0.

[canbax]

I would like to add styling only to a submenu and not the menu

Currently, it does not support this. A menu and submenu are basically the same things, they are both menus. It doesn't look reasonable to implement such a thing. This might be a new feature.

But you can again achieve this by adding some CSS classes. You can define CSS for child DOM elements. Using them, this could be achieved I guess.

[lilfrootyloops]

Thanks for the suggestion. However, if you read the second part of my question, you'll see why I'm trying to style only the submenu and not the menu:

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).

^ Can you please address the second part of my question. Is it possible to style (e.g., bold) only part of the content being displayed in a menu or submenu option? If so, I'd really appreciate it if it can be explained how to be done.

Regarding your suggestion for the first part of my question, can you please provide an example of a CSS class that would target the submenu as a child DOM element. I am a bit unsure how such a CSS class would not affect other child elements that are in my application outside of the context menu. I have tried doing .custom-menu-item > * {} in my CSS stylesheet; however, that doesn't work. Also, where do you propose that I call this class? Would it still be done in menuItemClasses?

[canbax]

This question is very specific usage of this library. Not really an issue with the library itself. The best way to get an answer to this is to ask on StackOverflow with minimal reproducible sample codes. Without code samples, things are a bit blurry

[lilfrootyloops]

Not really an issue with the library itself.

Clearly, this is an issue with the library itself — since I'm unable to style the submenu without identically styling the menu. In your previous comment, you suggested "adding some CSS classes" as a solution; however, it does not seem like it's even possible to create CSS classes to target the DOM elements being used for the submenus — and your lack of providing a concrete example of that, after being requested to do so, further supports its impossibility within the current state of the library.

And since my questions are regarding "a very specific usage of this library," wouldn't it be best to directly ask the developers of the library itself for help — and not random people on Stack Overflow who are likely not (as) familiar with the library?

Without code samples, things are a bit blurry

I have posted a lot of my code in the issue, so I'm not sure what exactly is "blurry" to you or why you're implying I haven't provided any code samples. What do you feel is lacking from the large amount of code I have already provided?

[lilfrootyloops]

@ugurdogrusoz. Is there anyone else who can be assigned to this issue?

[ugurdogrusoz]

@lilfrootyloops Sounds like you are asking for a new feature, something the library does not currently support. @canbax is suggesting some work arounds. Unfortunately we don’t have the bandwidth to implement such new features. Anyone is welcome to work on this and do a PR however. We’d be happy to review and merge.