Custom Styling for Electron Right-Click Menu

Question

Currently, my code (see below) is giving the OS Right-click menu. My goal is to add custom stylings, such as changing the background color, or adding padding. I want to know if that is possible with my current code or if I have to use a different Package.

Here is my code:

const remote = electron.remote
const Menu = remote.Menu
const MenuItem = remote.MenuItem

const sceneCardElements = document.querySelectorAll('.scene-card')

let rightClickPosition = null

const sceneCardMenu = new Menu()
const sceneCardMenuItem1 = new MenuItem({
  label: 'Edit',
  click: () => {
    remote.getCurrentWindow().loadFile('./sceneSettings.html')
  }
})
sceneCardMenu.append(sceneCardMenuItem1)

sceneCardElements.forEach((sceneCardElement) => {
    if (sceneCardElement == null) return
    sceneCardElement.addEventListener('contextmenu', (e) => {
        e.preventDefault()
        rightClickPosition = {x: e.x, y: e.y}
        sceneCardMenu.popup(remote.getCurrentWindow())
      }, false)
})

here is a screenshot of what it returns:

My Code's Output

Here is a screenshot of what I want to do (example from Discord):

An Example Software's Output

Thanks!

Answer 1

So, I ended up using a library called tippy.js and using their right-click menu template

here is the final code for anyone looking at this post in the future:

 // Get the Element you want to Right-Click const element = document.querySelector('#rightClickable') // Define the Tippy.js Rightclick Element const instance = tippy(element, { // Get the Template you made into JS content: document.getElementById('rightClickMenuTemplate').innerHTML, placement: 'right-start', trigger: 'manual', interactive: true, arrow: false, offset: [0, 0], allowHTML: true, }); // Add the Event Listener element.addEventListener('contextmenu', (event) => { event.preventDefault(); instance.setProps({ getReferenceClientRect: () => ({ width: 0, height: 0, top: event.clientY, bottom: event.clientY, left: event.clientX, right: event.clientX, }), }); instance.show(); });

 <.-- Right Click the Text Below --> <p id="rightClickable">Right Click Me:</p> <;-- Right-Click Menu Template Used by Tippy:js --> <div id="rightClickMenuTemplate" style="display; none. visibility: hidden."> <strong>Hi from the Right-Click Menu</strong> </div> <:-- Import Tippy.js --> <script src="https.//unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script>