Emotion cache

All Mantine components are styled with emotion. In some cases you will need to create custom emotion cache, for example to handle RTL direction.

Configure emotion

By default, Mantine create emotion cache for you automatically. If you need to change cache options, then use createEmotionCache function to create new cache, it accepts a configuration object with the following properties:

  • key (required) – the prefix before class names, defaults to mantine
  • container – a DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
  • prepend - a boolean representing whether to prepend rather than append style tags into the specified container DOM node
  • stylisPlugins – an array of Stylis plugins that will be run by Stylis during preprocessing, for example stylis-plugin-rtl can be used to add RTL support
import { MantineProvider, createEmotionCache } from '@mantine/core';


const myCache = createEmotionCache({ key: 'mantine' });


function Demo() {
  return (
    <MantineProvider emotionCache={myCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Change styles insertion point

By default, Mantine components styles are prepended to head to allow overrides. To make Mantine styles override other styles, create emotion cache with prepend: false. With this option styles will be added at the end of head element:

import { MantineProvider, createEmotionCache } from '@mantine/core';


const appendCache = createEmotionCache({ key: 'mantine', prepend: false });


function Demo() {
  return (
    <MantineProvider emotionCache={appendCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Change classes prefix

To change classes prefix create cache with key:

import { MantineProvider, createEmotionCache } from '@mantine/core';


const myCache = createEmotionCache({ key: 'my-prefix' });


function Demo() {
  return (
    <MantineProvider emotionCache={myCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Now classes will follow this pattern: my-prefix-{random part}.

Server side rendering with custom cache

To setup server side rendering with custom cache, you will need to provide the same emotion cache both to MantineProvider and to the server side code.

Example with Next.js (view full code on GitHub):

// rtl-cache.ts
import rtlPlugin from 'stylis-plugin-rtl';
import { createEmotionCache } from '@mantine/core';


export const rtlCache = createEmotionCache({
  key: 'mantine-rtl',
  stylisPlugins: [rtlPlugin],
});
// _app.tsx
import { AppProps } from 'next/app';
import { MantineProvider } from '@mantine/core';
import { rtlCache } from '../rtl-cache';


export default function App(props: AppProps) {
  const { Component, pageProps } = props;
  return (
    <div dir="rtl">
      <MantineProvider
        theme={{ dir: 'rtl' }}
        withGlobalStyles
        withNormalizeCSS
        emotionCache={rtlCache}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </div>
  );
}
// _document.tsx
import Document, { DocumentContext } from 'next/document';
import { ServerStyles, createStylesServer } from '@mantine/next';
import { rtlCache } from '../rtl-cache';


const stylesServer = createStylesServer(rtlCache);


export default class _Document extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);


    return {
      ...initialProps,
      styles: [
        initialProps.styles,
        <ServerStyles html={initialProps.html} server={stylesServer} key="styles" />,
      ],
    };
  }
}
Go back
Theme functions – Theming
Up next
sx prop – Styles
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter