Examples › Styling

There are many ways to style a context menu besides setting its basic configuration options and its items action colors.
The ContextMenuProvider wrapper component accepts the following properties:

className
style
sx
classNames
styles

The className, style and sx properties are used to target the component root, while the classNames and styles properties can be used to target the individual component parts, root and item.

The above properties, if passed to the ContextMenuProvider component, will be passed down to all the context menus that are rendered within the provider.

import { MantineProvider, createStyles } from '@mantine/core';
import { ContextMenuProvider } from 'mantine-contextmenu';
import { AppProps } from 'next/app';

const useStyles = createStyles((theme) => ({
  contextMenuRoot: {
    border: `1px solid ${theme.colors.red[6]}`,
  },
  contextMenuItem: {
    background: theme.colorScheme === 'dark' ? theme.colors.red[9] : theme.colors.red[2],
    '&&': {
      '&:hover': {
        background: theme.colorScheme === 'dark' ? theme.colors.red[8] : theme.colors.red[3],
      },
    },
  },
}));

export default function App({ Component, pageProps }: AppProps) {
  const { classes } = useStyles();
  return (
    <MantineProvider>
      <ContextMenuProvider
        classNames={{
          root: classes.contextMenuRoot,
          item: classes.contextMenuItem,
        }}
      >
        <Component {...pageProps} />
      </ContextMenuProvider>
    </MantineProvider>
  );
}

When styling with class names, you may need to increase selector specificity to override the default styling.
See this StackOverflow question for more information.

You can pass an options object with the same properties as the second argument to the showContextMenu function returned by useContextMenu hook to target the individual context menu instances, in which case they will override any provider properties.
The examples below will use this approach.

Styling the container with a className

You can specify a className that will target the component root:

const useStyles = createStyles((theme) => ({
  contextMenu: {
    padding: theme.spacing.md,
    border: `1px solid ${theme.colors.red[6]}`,
  },
}));

export default function StylingExampleMenuWithClassName() {
  const showContextMenu = useContextMenu();
  // ...
  const { classes } = useStyles();

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        { className: classes.contextMenu }
      )}
    />
  );
}

Picture by Manja Vitolic

Styling the container with a style object

You can specify a style object with CSS properties that will be applied to the component root:

export default function StylingExampleMenuWithStyleObject() {
  const showContextMenu = useContextMenu();
  // ...

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        { style: { border: '1px dashed #d3c22f' } }
      )}
    />
  );
}

Picture by Pacto Visual

Styling the container with sx

You can provide an sx property that will target the component root:

export default function StylingExampleMenuWithSxObject() {
  const showContextMenu = useContextMenu();
  // ...

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        { sx: { border: '1px solid #da6b6b' } }
      )}
    />
  );
}

Picture by Lloyd Henneman

The sx property can also point to a function that receives the current theme as its argument:

export default function StylingExampleMenuWithSxFunction() {
  const showContextMenu = useContextMenu();
  // ...

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        { sx: (theme) => ({ border: `1px solid ${theme.colors.grape[6]}` }) }
      )}
    />
  );
}

Picture by Michael Sum

Styling with multiple class names

Here’s an example of how you can use classNames property to target the individual component parts:

const useStyles = createStyles((theme) => ({
  contextMenuRoot: {
    border: `1px solid ${theme.colors.red[6]}`,
  },
  contextMenuItem: {
    background: theme.colorScheme === 'dark' ? theme.colors.red[9] : theme.colors.red[2],
    '&&': {
      '&:hover': {
        background: theme.colorScheme === 'dark' ? theme.colors.red[8] : theme.colors.red[3],
      },
    },
  },
}));

export default function StylingExampleWithClassNames() {
  const showContextMenu = useContextMenu();
  // ...
  const { classes } = useStyles();

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        {
          classNames: {
            root: classes.contextMenuRoot,
            item: classes.contextMenuItem,
          },
        }
      )}
    />
  );
}

Picture by Zeke Tucker

Styling with a styles object

Here’s an example of how you can use styles property to target the individual component parts:

export default function StylingExampleWithStylesObject() {
  const showContextMenu = useContextMenu();
  // ...

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        {
          styles: {
            root: { border: '1px solid #d30e0e' },
            item: { color: '#d30e0e' },
          },
        }
      )}
    />
  );
}

Picture by Roberto Huczek

The styles property can also point to a function that receives the current theme as its argument:

export default function StylingExampleWithStylesFunction() {
  const showContextMenu = useContextMenu();
  // ...

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          // context menu items...
        ],
        {
          styles: (theme) => ({
            root: { border: `1px solid ${theme.colors.red[6]}` },
            item: { color: theme.colors.red[6] },
          }),
        }
      )}
    />
  );
}

Picture by Andriyko Podilnyk

Styling individual actions with className, style or sx

You can also style individual actions by passing a className, style or sx property to the object describing an individual menu item:

const useStyles = createStyles((theme) => ({
  contextMenuRoot: {
    border: `1px solid ${theme.colors.orange[6]}`,
  },
  contextMenuItem: {
    color: theme.colors.grape[6],
  },
  copyAction: {
    color: theme.colors.red[6],
  },
}));

export default function StylingExampleWithIndividualActionStyling() {
  const showContextMenu = useContextMenu();
  // ...
  const { classes } = useStyles();

  return (
    <Picture
      // component props...
      onContextMenu={showContextMenu(
        [
          {
            key: 'copy',
            icon: <IconCopy size={16} />,
            onClick: () => copyImageToClipboard(src),
            className: classes.copyAction, // 👈 action styled with className
          },
          {
            key: 'download',
            icon: <IconDownload size={16} />,
            onClick: () => downloadImage(src),
            // 👇 action styled with a style object
            style: {
              fontWeight: 'bold',
              color: '#0d8527',
            },
          },
          {
            key: 'div-1',
            // 👇 divider styled with sx
            sx: (theme) => ({ background: theme.colors.orange[6] }),
          },
          {
            key: 'flipVertical',
            icon: <IconFlipVertical size={16} />,
            onClick: () => setFlipVertical((v) => !v),
          },
          {
            key: 'flipHorizontal',
            icon: <IconFlipHorizontal size={16} />,
            onClick: () => setFlipHorizontal((v) => !v),
          },
        ],
        {
          // 👇 menu styled with class names
          classNames: {
            root: classes.contextMenuRoot,
            item: classes.contextMenuItem,
          },
        }
      )}
    />
  );
}