Mantine ContextMenu

Source code18.8k/monthSponsor

Styling

Mantine ContextMenu V7 is a major release with breaking changes and is compatible with Mantine V7.
One of the breaking changes in Mantine V7 was the migration to native CSS.
The styling is no longer done with CSS-in-JS (Emotion), hence the createStyles function is no longer available for use in other libraries built on top of it or in your own code.

In V7, all @mantine/* packages are shipped with native CSS files which can be imported from @mantine/{package}/styles.css or @mantine/{package}/styles.layer.css.

Similarly, Mantine ContextMenu comes with native CSS files which can be imported from mantine-contextmenu/styles.css or mantine-contextmenu/styles.layer.css.

Controlling the order of styles with CSS layers

Some bundlers and frameworks (including Next.js) do not allow you to control the order of stylesheets in your application when importing CSS files.

You can mitigate this by making use of CSS layers.

For example, in a Next.js application you could ensure the correct order of styles either by importing the styles.layer.css files and using the @layer directive, like so:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { ContextMenuProvider } from 'mantine-contextmenu';

// 👇 Import the mantine-core layer CSS file;
//    this will automatically place it in a `mantine` layer
import '@mantine/core/styles.layer.css';

// 👇 Import the mantine-contextmenu layer CSS file;
//    this will automatically place it in a `mantine-contextmenu` layer
import 'mantine-contextmenu/styles.layer.css';

// 👇 Import your own CSS file;
//    make sure to specify the layers order with the `@layer` directive
//    inside that file
import './layout.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <MantineProvider defaultColorScheme="auto">
          <ContextMenuProvider>{children}</ContextMenuProvider>
        </MantineProvider>
      </body>
    </html>
  );
}

Or, if you want to have even more control over the order of styles, you can make use of the postcss-import plugin to control the layer names when importing the styles.css files, and then use the @layer directive, like so:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { ContextMenuProvider } from 'mantine-contextmenu';

import './layout.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <MantineProvider defaultColorScheme="auto">
          <ContextMenuProvider>{children}</ContextMenuProvider>
        </MantineProvider>
      </body>
    </html>
  );
}

Now that you understand how styling works, feel free to browse the code examples to see the context menu in action and learn how to use it, and refer to the type definitions page for an exhaustive list of customizable options.