Styling

Using styles

It's possible to choose a style both for the container and the rows through menuStyle prop. You can also customise directly a single row by using the style and hoverStyle properties on the desired item. Styles are applied in this order:

1. defaultStyle
2. menuStyle
3. style and hoverStyle

Meaning style and hoverStyle override menuStyle that overrides defaultStyle.

The menuStyle prop

It allows you to style both the container and the rows. Gives the general style of the menu.

<ContextMenu
  menuStyle={{
    container: { borderRadius: 0 },
    row: {
      normal: {
        color: "lightgreen",
        backgroundColor: "darkviolet",
        fontWeight: "bold",
      },
      hover: {
        color: "darkviolet",
        backgroundColor: "lightgreen",
        fontWeight: "bold",
      },
    },
  }}
  items={items}
>
  <div> Context menu content </div>
</ContextMenu>

Right click here!

The style and hoverStyle props on items

You may also want to change directly how a single option looks and feels on hover. Just add one or both of these two props to the desired item.

{
  label: "Delete",
  onClick: () => alert("Delete clicked"),
  style: {
    color: "red",
    backgroundColor: "black",
    fontWeight: "bold",
  },
  hoverStyle: {
    color: "black",
    backgroundColor: "red",
    fontWeight: "bold",
  },
},

Right click here!

Using classes

It's also possible to directly use css classes and modules. It kinda works the same way as with styles, this time though the prop is

menuClassName?:{
    container?: string,
    row?: string,
}

Intuitively, container will be applied to the outer part of the menu and row to each single row. Just like with styles, you can use the className property on every individual item to make it different from the others.

Items also accept a disabledClassName prop to specify how to handle the style when such item is disabled.