En mi aplicación Next.js, estoy usando la biblioteca de menús contextuales de Cytoscape . Veo que hay una funcionalidad integrada a través de menuItemClasses y contextMenuClasses para agregar estilo a los menús y submenús; sin embargo, me gustaría agregar estilo solo a un submenú y no al menú. He intentado mover menuItemClasses y contextMenuClasses al interior donde se define el submenú, pero eso no funciona. ¿Es posible diseñar solo un submenú y no el menú? Si es así, ¿podría explicar cómo se puede hacer esto?

Además, me gustaría diseñar las opciones dentro del submenú para que solo una parte del contenido esté en negrita. En mi caso, el contenido que se está mostrando como opciones en el submenú son pares clave-valor, estando estructurado como ${x}: ${y} . Solo quiero que lo que se pasa a x esté en negrita ( por ejemplo , clave : valor). ¿Es posible hacer esto? Si es así, agradecería mucho si se puede explicar cómo se hace. He incluido mi código a continuación:

Código:

 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, estoy usando Cytoscape Context Menus v4.1.0.